- react-native
- EcmaScript 2015 (ES6)
- eslint, babel-eslint 代码质量及代码风格
| 模块 | 说明 |
|---|---|
| React-Native 15.0 | 跨平台移动App开发框架 |
| React-Redux | 路由支持 |
| react-native-code-push | 热更新支持 ios , android |
| react-native-animatable | 动画支持库(IOS,Android) |
| react-native-viewpager | 兼容IOS和Android的 ViewPage控件, |
| react-native-router-redux | 路由组件,整合了React-Redux, 整合了 Nav 和 TabBar组件 |
| react-native-collapsible | 折叠组件,兼容 android和ios |
| react-native-scrollable-tab-view | 支持横向滑动和点击的选项卡组件, 兼容 Android 和 ios, Android使用的是ViewPageAndroid, ios使用的是ScrollView |
| react-native-gesture-password | 纯JS实现的 手势密码组件 兼容 ios 和 android |
| react-native-simple-store | 对React Native's AsyncStorage 的简单封装 |
├── .babelrc <--- babel白名单配置,允许的 ES6,ES7的属性
├── .editorconfig <--- 通用编辑器配置文件
├── .eslintignore <--- ESLint 忽略名单
├── .eslintrc <--- ESLint 规则配置
├── .gitignore <--- Git 忽略名单
├── README.MD
│
├── app <--- app 主要工作区
│ ├── baseComponents <--- 通用组件 Button组件,NaviBar组件,Article组件...
│ ├── components <--- 组件 每个完整的单面 我和微金所组件,产品新闻组件,培训组件,展业组件...
│ ├── containers <--- 路由配置,聚合组件
│ ├── config <--- 全局配置存放位置 , 包含全局配置,WebApi接口配置
│ ├── libs <--- 这里放一些公用的lib
│ ├── reducers <--- redux reducers
│ └── styles <--- 配置,全局颜色配置,包括字体,字号,颜色,工具条等颜色样式
├── assets <--- 静态资源 RN里可以通过 require('../../assets/yourResName.name')
│ ├── loginBg.jpg
│ ├── tab1.png
│ ├── tab2.png
│ ├── tab3.png
│ └── tab4.png
│
├── mockServer <--- 模拟http请求数据数
│ ├── index.js <--- http服务器 入口文件
│ └── public <--- json数据 都放到这个文件夹中
│
├── index.android.js <--- android主入口
├── index.ios.js <--- ios主入口
│
├── buildAndroid.sh <-- 构建 android apk 需要执行权限
├── bundle.sh <-- 生成 jsbundle,并发布到 codepush server 需要执行权限
│
├── ios <--- ios工程目录
├── android <--- android工程目录
│
├── ReactNativeSinppet.jar <--- ReactNative 代码模板
└── package.json
git clone http://192.168.0.8/front-end/wealth-app.git
npm install- 确定启用node环境 Language & FrameWorks -> Node And Npm -> Node Core Library enable 为
enable - Javascript Version 为
JSX Harmony - Javascript -> Libray -> ECMAScript 6 勾选
- 启用ESLint代码质量及代码风格检查 Javascript -> Code Qutity tool -> Eslint
- 安装ReactNative代码模板 files->import->
ReactNativeSinppet.jar
请参考 http://react-native.cn/docs/android-setup.html#content
- 必需安装
Android SDK,VirtualBox,Genymotion模拟器,jdk - 可选安装
Android Studio
测试时 必须首先启动 Genymotion虚拟机,运行命令, 注意: 第一次运行时,会自动下载一些jar依赖包,需要等待几分钟
react-native run-android- 用
xcode打开ios/WealthApp.xcodeproj - 选择一个ios模拟器,可选
iphone6,iphone6 plus,iphone5等 - 按下
Commond+R启动测试
提醒: 在模拟器中,按下Command+D可以调出设置菜单
- 首先通过数据线将
开发机和iphone真机连接 - 用
xcode打开ios/WealthApp.xcodeproj,选择xxx的iphone - 按下
Command+R,程序会自动安装到iphone真机上并启动,可以在xcode里查看调试信息
提醒: 晃动手机可以调出设置菜单
在app/components目录下添加一个 js 命名为 NewComponent.js
注意:根据组件命名规范,组件首字母必须大写
```
// NewComponent.js
import React,{View,Text} from 'react-native';
class NewComponent from React.Component{
// 构造
constructor(props){
super(props);
// 实现getInitState
this.state = {
...
}
}
// 渲染
render(){
}
// 默认属性
static defaultProps = {
}
// 属性类型
static protoTypes = {
}
}
// 导出组件
export default NewComponent;
```
快速生成组件代码 输入 rnC 按下 Tab键 自动生成组件样板代码
编辑app/containers/app.js
```
// app/containers/app.js
...
// 引用组件
import NewComponent from '../components/NewComponent';
...
// 定义路由
<Route name='NewComponent' component={NewComponent} hideBar={false}/>
```
路由属性说明
- name 路由名称
- component
- type
- hideBar
true或false默认为false - hideFoot
true或false默认为false
-
组件名称
每个单词的首字母都要大写包括组件文件名,类名// NewComponent.js class NewComponent from React.Component{ } export default NewComponent; -
路由命名
第一个单首字母小写,第二个单词首字母大写<Route name="demo" component={Demo} />
全局颜色配置说明 text
在项目根目录下执行 buildAndroid.sh,确保该脚本有执行权限, chmod +x buildAndroid.sh
# 赋予执行权限
chmod +x buildAndroid.sh
# 执行编译apk
./buildAndroid.sh
apk 默认保存到 android/app/build/outputs/apk
将需要模拟的数据文件以json格式保存到 mockServer/public下,然后 运行 mockServer/index.js