(三)ReactNative踩坑集锦

一、
初始化state报错：null is not a object (evaluating‘this.state.value’)
语法：

getInitialState () {  
       return {num: 0};  
 } 

以上的初始化state是使用createClass 创建组件时的语法，当我们用es6语法时，需要放在constructor ()内

//用到es6的时候初始化state应该在constructor ()内，而不是用getInitialState()   
class Search extends Component {  
  constructor () {  
    super();  
    this.state = {  
      ....  
    }  
  }  
  ...  
}  

二、
expected a component class,got[object Object]

遇到该错误原因大致是render方法中的组件代码写错了，RN组件都是大写开头，如：，所以遇到这个错误先检查自己代码是否出现了小写开头。

三、
红屏问题”Could not get BatchedBridge, make sure your bundle is packaged correctly”
解决方案：在报错的页面，点击菜单键，选择Dev Settings，点击Dubug server host & port for device，设置IP和端口，cmd命令ipconfig找出自己的本机ip后面接8081端口，然后返回刷新界面或者重新运行，ok了。
如果上述步骤仍旧不能解决继续看：
在package.json中的”scripts”中添加
“bundle-android”:”react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –sourcemap-output android/app/src/main/assets/index.android.map –assets-dest android/app/src/main/res/”,

添加完后，根目录下运行：
react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –sourcemap-output android/app/src/main/assets/index.android.map –assets-dest android/app/src/main/res/，
如果出现如下错误：

没有assets目录,手动添加下重新运行即可。

四、
昨天写了个小功能，也运行了，可以没有问题，回到家后，再次打开运行项目，发现项目界面成了创建项目时的欢迎界面，reload后报错，就想到估计是DEV Setings没有设置Debug servers host，(ip:8081).reload后就可以了。

五、
Execution failed for task ‘:app:compileDebugJavaWithJavac’.

Could not find tools.jar
参考:
android - Execution failed for task ‘:app:compileDebugJavaWithJavac’
jdk环境变量配置

错误的原因是没有安装java SDK.官网选择下载对应的SDK。安装即可。
注意：自定义安装后，自定义路径下面下的是jre,比如，我自定义安装路径为F:\ProgramFiles\java\jre1.8.0_111,java\jre1.8.0_111是默认安装路径的字段，照搬过来。安装成功后，
JDK被放在了C:\Program Files\Java\jdk1.8.0_111目录下面。

安装成功后，需要设置环境变量。[查看原文]
右击“我的电脑”=》”system”=》“advanced system setting”=》“environment variable”

1）在系统变量里新建JAVA_HOME变量，变量值为：C:\Program Files\Java\jdk1.8.0_111（根据自己的安装路径填写）
2）新建classpath变量，变量值为：.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar
3）在path变量（已存在不用新建）添加变量值：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin（注意变量值之间用“;”隔开）
4)“开始”–>“运行”–>输入“javac”–>”Enter”，如果能正常打印用法说明配置成功！

补充环境变量：
JAVA_HOME:jdk的安装路径
classpath:java加载类路径，只有类在classpath中java命令才能识别，在路径前加了个”.”表示当前路径。
path：系统在任何路径下都可以识别java,javac命令

六、
Error:Could not expand ZIP *.aar

解决方法：出现这种情况一般是权限问题，所以使用管理员身份运行即可解决(右键该文件，选择管理员取得权限)

如果是android请在取得权限后clean project或者到项目目录android/app/下删除build文件夹在运行

七、
使用realm数据库需要注意的几点：
在 MainApplication 中添加

import io.realm.react.RealmReactPackage;

 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RealmReactPackage()
      );
    }

..\node_modules\realm\android\build\outputs\aar\下的aar文件需要右键选择管理员获取所有权

八、
当我在js中使用map函数时，竟然报了一个警告：warning: each child in an array or iterator should have a unique key prop。
虽然警告并不影响界面，但是对于强迫症的我来说就。。。
一下是我的代码：

<ScrollView  style={styles.container}>
        <View style={styles.container}>
          {
            cars.map((value , key) => {
              return (
                <View style={styles.realmItem}>
                  <View style={styles.realmItemLeft}>
                    <Text style={ styles.realmItemText }>{value.name}</Text>
                    <Text style={ styles.realmItemText }>{value.dept}</Text>
                  </View>
                  <View style={styles.realmItemRigth}>
                    <Text>{value.phone}</Text>
                  </View>
                </View>
                );
            })
          }
        </View>
      </ScrollView>

解决办法：在view的属性中加入key=key就可以了，下面是更改后的代码：

<ScrollView  style={styles.container}>
        <View style={styles.container}>
          {
            cars.map((value , key) => {
              return (
                <View key={key} style={styles.realmItem}>
                  <View style={styles.realmItemLeft}>
                    <Text style={ styles.realmItemText }>{value.name}</Text>
                    <Text style={ styles.realmItemText }>{value.dept}</Text>
                  </View>
                  <View style={styles.realmItemRigth}>
                    <Text>{value.phone}</Text>
                  </View>
                </View>
                );
            })
          }
        </View>
      </ScrollView>

九、
realm at path already opened on current thread with different schema
当我们在应用的两个功能模块中如果都采用realm数据库，那么我们需要在使用过realm后关闭改签数据连接对象即：

realm = new Realm({schema: [user]});
realm.close();

如果不关闭，第二次打开realm时就会出现该错误

十、
从0.44版本开始，Navigator不再从‘react-native’中引入，而是需要npm install react-native-deprecated-custom-components –save并在代码中import {Navigator} from ‘react-native-deprecated-custom-components’.
同样从0.44版本开始，BackAndroid组件不在出现，而是用用‘BackHandler’代替