react-native开发经验

# **RN开发经验**

## 一、环境配置
关于环境配置，前辈已有完整的总结：http://tvrn.devops.letv.com/docs/Environment.html

**IDE准备：** [AndroidStudio](https://developer.android.com/studio/index.html)，[VisualStudioCode](https://code.visualstudio.com/)

如何打造现代化RN开发环境：http://tvrn.devops.letv.com/docs/tools/vscode.html

## 二、TVRN Demo 运行
TVRN是为了方便TV上的开发者使用的组件库。详见：http://tvrn.devops.letv.com/ (每个人都可以修改更新文档，入库后第二天早上10点更新)

git地址如下：

`git clone ssh://username@athena.devops.letv.com:29418/LETVRD/tvrn-libs`

playground项目是一个标准的RN-app工程，只不过是嵌在tvrn-libs里面，同时直接引用了tvrn-libs。 用途：

1、开发时作为组件的host，能直接看到组件的运行效果
    2、作为tvrn组件库的演示examples-app

###### **运行playground**
    1、在根目录执行 npm install（package.json中列出了项目所有依赖）；
    2、修改vi playground/android/gradle/wrapper/gradle-wrapper.properties，
      注释掉从网络下载，使用本地gradle-2.10-all.zip；
    3、拷贝一个gradle包到playground/android/gradle/wrapper/目录下：
      cp ../*****/gradle-2.10-all.zip playground/android/gradle/wrapper/；
    4、根目录下执行tvrn run-android --root playground（--root指定目录）；
    注：此Demo目前暂只能在EUI6.0上跑通。

## 三、使用组件
```JavaScript
import React, { Component } from 'react';

import {
    AppRegistry,
    Navigator,
} from 'react-native';
import { FocusableView } from 'tvrn-libs';
import AccountCenter from './src/ui/AccountCenter';

```
如果export default class AccountCenter，则AccountCenter不需要大括号，如import AccountCenter from './AccountCenter';

如果export class AccountCenter则不需要大括号，如import {AccountCenter} from './AccountCenter';
可以export出多个组件。

## 四、使用导航器跳转页面
Navigator使用纯JavaScript实现了一个导航栈，因此可以跨平台工作。

Navigator可以在renderScene方法中根据当前路由渲染不同的组件。默认情况下新的场景会从屏幕右侧滑进来，但你也可以通过configureScene方法来管理这一行为。

```JavaScript
<Navigator
    initialRoute={{ component: AccountLogin }} //这个指定了默认的页面
    configureScene={this.configureScene} //跳转动画
    renderScene={this.renderScene} /> //加载页面
```
跳转：
```JavaScript
_gotoRegister() {
  this.props.navigator.push({
    title: 'RegisterView1',
    component: RegisterView1,
    params: {//跳转携带参数
      name: 'test'
    },
    // type: 'Bottom'
  });
}
```

## 五、component生命周期

**RN中的component跟Android中的activity，fragment等一样，存在生命周期。**

如图，可以把组件生命周期大致分为三个阶段：

* 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
* 第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
* 第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。

**下面来详细介绍生命周期中的各回调函数。**
#### **getDefaultProps**
在组件创建之前，会先调用 getDefaultProps()，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。

#### **getInitialState**
在组件被创建并加载候，首先调用 getInitialState()，来初始化组件的状态。

#### **componentWillMount**
这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。

#### **render**
render绘制组件到界面上

#### **componentDidMount**
在组件第一次绘制之后，会调用 componentDidMount()，通知组件已经加载完成。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求。这个函数也是只被调用一次。

#### **componentWillReceiveProps**
如果组件收到新的属性（props），就会调用 componentWillReceiveProps()。在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。

#### **shouldComponentUpdate**
当组件接收到新的属性和状态改变的话，都会触发调用 shouldComponentUpdate(...)。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。
默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。

#### **componentWillUpdate**
如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()。
需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。
紧接着这个函数，就会调用 render() 来更新界面了。

#### **componentDidUpdate**
调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来得到通知，

#### **componentWillUnmount**
当组件要被从界面上移除的时候，就会调用 componentWillUnmount()。在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。

|生命周期|调用次数|能否使用setState()|
|--|--|--|
|getDefaultProps|1|否|
|getInitialState|1|否|
|componentWillMount|1|是|
|render|>=1|否|
|componentDidMount|1|是|
|componentWillReceiveProps|>=0|是|
|shouldComponentUpdate|>=0|否|
|componentWillUpdate|>=0|否|
|componentDidUpdate|>=0|否|
|componentWillUnmount|1|否|

## 六、back键处理
**安卓back键的处理主要就是一个事件监听：**
```JavaScript
BackAndroid.addEventListener('hardwareBackPress', this.onBackPressed);
BackAndroid.removeEventListener('hardwareBackPress', this.onBackPressed);
```
**根据当前界面决定作何动作**
有时候我们有这样的需求：当用户处于某些界面下时，back键要做特殊的动作，如：提示用户是否要保存数据，或者解锁界面禁止back键返回等等。此时，最佳实践是在route或route中对应的Component上保存关于如何处理back键的信息：
```JavaScript
onBackAndroid = () => {
   const nav = this.navigator;
   const routers = nav.getCurrentRoutes();
   if (routers.length > 1) {
     const top = routers[routers.length - 1];
     if (top.ignoreBack || top.component.ignoreBack){
       // 路由或组件上决定这个界面忽略back键
       return true;
     }
     const handleBack = top.handleBack || top.component.handleBack;
     if (handleBack) {
       // 路由或组件上决定这个界面自行处理back键
       return handleBack();
     }
     // 默认行为： 退出当前界面。
     nav.pop();
     return true;
   }
   return false;
 };
```

## 七、RN中JS如何调用Java代码
1. 首先新建一个类继承自ReactContextBaseJavaModule这个抽象类
```java
public class LetvAccountManager extends ReactContextBaseJavaModule {
```

2. 重写getName方法，命名一下扩展。以后可以在js里面按照名字找到这个扩展。
```java
@Override
public String getName() {
    return "LetvAccountManager";
}
```
3. 实现暴露给js的接口
```java
@ReactMethod
public void removeLocalAccount(String userName, Promise promise) {
    Log.d(TAG, "do removeLocalAccount");
    LocalAccountConfig.removeAccoutRecord(mContext, userName);
}
```
4. 书写注册接口待用。新建一个MyPackage，在createNativeModules中完成注册接口。
```Java
public class MyPackage implements ReactPackage {

@Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<NativeModule>();
        modules.add(new LetvAccountManager(reactContext));
        return modules;
    }
```

5. 将写好的接口注册到MainActivity中去，其中有一个已经写好的方法 --- getPackages，们在其中，加入我们写好的接口(MyPackage)。
```java
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new TvrnLibsPackage(),
            new com.letv.tvrn.overseaaccountdemo.MyPackage()
        );
    }
```
6. 到这一步终于可以js调用了

```JavaScript
  import { NativeModules } from 'react-native';

const LetvAccountManager = NativeModules.LetvAccountManager;
  LetvAccountManager.removeLocalAccount;
 ```

## 八、国际化 I18N
 **先来个名词解释：**

I18N，其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数，是“国际化”的简称。

I18N是使用native监听系统语言变化后，JS端自动刷新的一套国际化方案,用法如下：

1、在I18N下添加配置文件，格式如下：
  ```JavaScript
  const zh_CN = {
    app_name: '乐视账号',
    account_login: '立即登录',
    account_find_password: '找回密码',
  };

export default zh_CN;
  ```

2、 在入口js中引用多语言组件，在constructor()中调用init()方法，再在componentWillMount()中使用timer延迟50ms后调用getLang()方法，最后声明ContextProps，向子组件传递数据。
```JavaScript
constructor(props){
  super(props);
  ....
  Language.init();
}

componentWillMount() {
    this.timer = setTimeout(() => {
      lang = Language.getLang();
      this.setState({
          ready:true,
      });
      },50
    );
  }

Main.childContextTypes = {
  language: React.PropTypes.object
};
```

3、子组件使用国际化组件
```JavaScript
AccountLogin.contextTypes = {
  language: React.PropTypes.object,
};

<Text style={styles.title_text}>
 {this.context.language.app_name}
</Text>

```

## 九、集成方案
把react-native中公共的so和jar集成到系统中，以减小APP的空间占用，使用gradle编译，引用系统中的reactnative so和jar。

在项目根目录下执行：
```
cd android && ./gradlew assembleRelease
```
会在android/app/build/outputs/apk目录下会有app-release-unsigned.apk,然后把此apk进行对应系统签名即可。

## 十、常见错误

1.invariant violation:expected a component class,got[object object]

创建自定义组件首字母要大写，否则会报错.比如<login/>应该写成<Login/>

2.Module 0 is not a registered callable module.

将gradle升级成最新版本(cd Android 进入android目录执行:sudo ./gradlew clean) 或者通过android studio工具升级.

3.Element type is invalid: expected a string (for built-in components) or a class/function but got: object
   一般是你引用了无效的组件，如果组件确实正确，看下引用的组件是否正常导出：（export defalut）

4.react native  undefined is not an object (evaluating this....

发生该错误的一般是忘记bind(this),只要回调函数中需要用到this的，一般都需要bind.
  如：onPress={this.doRegister()} ==》 onPress={this.doRegister.bind(this)}

5.Could not get BatchedBridge, make sure your bundle is packaged corrrectly

adb reverse tcp:8081 tcp:8081

6.await is a reserved word

函数中有异步操作的时候，函数名前要加async，如async function getSystemAccount() {}

7.The android gradle plugin version 2.3.0-beta1 is too old, please update to the latest version.

修改playground/android/gradle/wrapper/gradle-wrapper.properties，注释掉从网络下载，使用本地gradle-2.10-all.zip；
```
# distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip
  distributionUrl=./gradle-2.10-all.zip
```

8.Unexpected character ‘�’ (1:0) 图片加载错误

根目录下重启服务 tvrn start

## 图书分享

《React Native开发指南》

《React Native入门与实战》

链接: https://pan.baidu.com/s/1pLqFr2z 密码: pp65

转载请注明出处！