KAKE4420 / FrontEnd

The place to store the codes and docs for front-end

FrontEnd with React-native(0.54.2)

The place to store the codes and docs for front-end

屏幕截图

以下为部分截图，全部截图请访问wanted安卓APP全部截图查看

安装

1.Clone the repo

$ git clone https://github.com/SEN-Wanted/FrontEnd.git
$ cd FrontEnd

2.Install dependencies(npm v4+)

npm install

3.Running on android

$ react-native run-android
or
$ adb devices
$ react-native run-android --deviceId yourdeviceId

第三方依赖

• mobx
• mobx-react
• mobx-react-form
• moment
• native-base
• react-native-animatable
• react-native-camera
• react-native-easy-toast
• react-native-progress
• react-native-refresh-list-view
• react-native-section-list-get-item-layout
• react-native-smart-parabola
• react-native-splash-screen
• react-native-star-rating
• react-native-swiper
• react-native-vector-icons
• react-navigation

常见问题

1.undefined is not an object(xx手机、虚拟机出现红色屏幕)

解决方法： 多为第三方依赖没有更新官方，需要自己手动更新，按照红色屏幕提示，找到报错文件，将以下代码

import React, {Component, PropTypes} from 'react';

改为

import React, {Component} from 'react';
import PropTypes from 'prop-types';

2.Duplicate file(文件重复,一般是图片文件，莫名其妙的错误，有几率出现)

例子：

D:\Github\FrontEnd\android\app\build\intermediates\res\merged\release\drawable-mdpi-v4\src_img_code_barcode.gif: error: Duplicate file.
D:\Github\FrontEnd\android\app\build\intermediates\res\merged\release\drawable-mdpi\src_img_code_barcode.gif: Original is here. The version qualifier may be implied.

解决方法： Add the following code to file node_modules/react-native/react.gradle :

doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("${resourcesDir}/drawable-${resSuffix}")
        if (originalDir.exists()) {
            File destDir = file("${resourcesDir}/drawable-${resSuffix}-v4")
            ant.move(file: originalDir, tofile: destDir)
        }
    }
    moveFunc.curry("ldpi").call()
    moveFunc.curry("mdpi").call()
    moveFunc.curry("hdpi").call()
    moveFunc.curry("xhdpi").call()
    moveFunc.curry("xxhdpi").call()
    moveFunc.curry("xxxhdpi").call()
}

inside def currentBundleTask = tasks.create(...

前端项目结构

|
|--src：前端开发的源码
|  |--comon：公共样式或JS文件
|  |--img：图片静态资源
|  |--scene：各个场景文件夹
|  |  |--Code：跟扫码相关的不可复用的js文件均放在该文件夹
|  |  |--Home：跟主页相关的不可复用的js文件均放在该文件夹
|  |  |--Login：跟登陆相关的不可复用的js文件均放在该文件夹
|  |  |--Mine：跟个人信息相关的不可复用的js文件均放在该文件夹
|  |  |--Message：跟消息相关的不可复用的js文件均放在该文件夹
|  |  |--Order：跟订单相关的不可复用的js文件均放在该文件夹
|  |  |--Restaurant：跟餐馆相关的不可复用的js文件均放在该文件夹
|  |  |--Search：跟搜索相关的不可复用的js文件均放在该文件夹
|  |  |--Sign：跟注册相关的不可复用的js文件均放在该文件夹
|  |--store：状态管理库
|  |--widget：可复用的小组件
|  |--api.js：暂时测试用的数据存放处
|  |--RootScene.js：根场景，存放导航的定义