我的第一个RN项目注意事项说明

#TonkinTalent


##下载本项目前，请安装nodejs，安装react-native基础环境，安装facebook最新的yarn管理工具。

1. 采用 git下载本工程，命令行下载如下：
  git clone https://git.oschina.net/zowork/TonkinTalent
2. 更新子仓库
  git submodule update --init --recursive
3. cd TonkinTalent
4. yarn install/npm i 
5. 运行react-native link
6. 安装完毕后，

##运行

### ios运行
react-native run-ios
react-native run-ios --simulator "iPhone 5se"

COMMOND + R 重新加载
COMMOND + D 调试菜单

### android 运行
react-native run-android
adb devices 查看连接设备

### 日志

执行：
```bash
react-native log-ios
react-native log-android
```

##开发

### 目录结构

* /img 目录下是图片请注意按照功能和页面放置图片，图片名称类似 name@2x.png
* /src 下面是代码目录，
* /src/pages 页面
* /src/widget 为公用组件
* /commons 目录为公用组件,参考公用组件详细说明
* /app-js-sdk 为客户端sdk 目录，使用 git子模块 ，参考git子模块说明

### commons

commons 模块集成有apis和setTimeout 函数，会在组件释放时释放相关资源

#### 代码提示
如果commons 不提示，请修改idea 或者webstorm 
*. 修改JavaScript 级别为flow 或者 jxf
*. 把commons和app-js-sdk 加入lib（一般不需要）

#### 网络请求

网络请求是标准的Promise ，唯一注意的地方是加入了default 函数处理错误情况！必须调用
支持Promise 相关并行，串行等操作

1. 修改服务器协议地址

修改 src/app.js 文件 下的
Apis.init("http://127.0.0.1:8080/","v1");

2. 简单调用

````javascript
this.commons.apis.accountApi.login(LoginForm.form(
    "123456", "13910831723"
)).then((m: LoginRet) => {
    
}).default();
````


3.串联

```javascript
this.commons.apis.accountApi.login(LoginForm.form(
    "123456", "13910831723"
)).then((m: LoginRet) => {
    return this.commons.apis.testApi.test()
}).then((o: TestObject) => {
    return this.commons.apis.testApi.test()
}).default();
```

4.并行

```javascript
Promise.all(
    [
        this.commons.apis.accountApi.login(LoginForm.form(
            "123456", "13910831723"
        )),
        this.commons.apis.testApi.test()
    ]
).then((m:LoginRet,o:TestObject)=>{

}).default();
```


#### commons 使用例子如下

````javascript
import React, {Component, PropTypes} from "react";
import {Text, View} from "react-native";
import Apis, {LoginForm, LoginRet} from "app-js-sdk";
import {Commons} from "commons";

export default class IndexView extends Component {
    commons: Commons = new Commons().bind(this);

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        //登录服务器
        this.commons.apis.accountApi.login(LoginForm.form(
            "123456", "13910831723"
        )).then((m: LoginRet) => {

        }).default();

        //定时任务
        this.commons.setTimeout(()=>{

        },500)
    }

    render() {
        return <View></View>;
    }
}

console.log("IndexView", IndexView);
````




## git子模块 

**使用 根目录下的 updateApi.sh 更新api 仓库**

app-js-sdk: https://git.oschina.net/hengxinAPP/app-js-sdk.git

git submodule add https://git.oschina.net/hengxinAPP/app-js-sdk.git app-js-sdk
git submodule 查看子仓库

初始化子仓库 git submodule init

更新子仓库 git submodule update --init --recursive

如果修改子仓库地址后用git submodule sync 同步




##杂项
清楚缓存
rm -rf $TMPDIR/react-*

//    "apis": "git+https://git.oschina.net/hengxinAPP/app-js-sdk.git",


## 使用 Ant Design Mobile of React 组件库

文档:<https://mobile.ant.design/docs/react/introduce>

github地址:<https://github.com/ant-design/ant-design-mobile>

安装 react-native-navigation
npm install react-native-navigation@next --save


## icon和加载画面

首先安装

npm install -g yo file:./lib/generator-rn-toolbox2
npm uninstall -g yo file:./lib/generator-rn-toolbox2

yo rn-toolbox2:assets --icon icon.png
yo rn-toolbox2:assets --splash splash.png --ios
yo rn-toolbox2:assets --icon icon.png --splash splash.png --store

node lib/generator-rn-toolbox/generators/assets/index.js
查看<https://github.com/bamlab/generator-rn-toolbox/blob/master/generators/assets/README.md>

激光

npm run configureJPush 5f8e78cbbc7a5601727b62c9 app


上线准备

1 app名字，描述，关键词，技术营销网址
2 销售范围区域
3 公司名字
4 3页最多5页进行截图（iphone5 iphone6 iphone6s）3套
5 商务代表联系方式
6 分级选项
7 演示账号
8 能ipv6 访问的 https 后端服务器

http://www.jianshu.com/p/b1b77d804254