React Native

常见错误

1.RN项目一定要注意版本问题，无论是react native还是其他组件的版本都一定要注意，不然会报错。尽量不要使用太高的版本，会有很多的问题。基本上所有的错误如果你实在解决不了都可以通过降低版本解决。

新版本的react-native初始化的项目会有这个错误（当时是0.59以上的版本报了这个错误），可以降低版本或者如下解决办法

遇到以下问题的请注意:
Unable to resolve module `./index` from `E: eactNativeAProject ode_modules eact-nativescripts/.`: The module `./index` could not be found from `E: eactNativeAProject ode_modules eact-nativescripts/.`. Indeed, none of these files exist: 
这个问题是由于react-native找不到index文件所导致
解决方法:
找到目录文件:node_modules eact-nativescriptslaunchPackager.bat
将:
node "%~dp0..cli.js" start 
修改为:
node "%~dp0..cli.js" start --projectRoot ../../../ 
重启服务即可

 2.有时候react-native的第三方组件会有Cannot read property xxx' of undefined的错误，可能是因为react的版本低导致的，因为高版本的react中不再有proptypes属性，需要导入prop-types组件。

以下是我测试demo时使用的版本及用其他版本遇到的问题：

"dependencies": {
"react": "16.3.1", //该版本不带proptypes属性，需要引入prop-types组件进行属性类型检验
"react-native": "0.55.4",  //最低需要react16.3.1版本，react-native版本和gradle版本需要匹配，否则会报错。而有些组件也会要求和gradle版本匹配。所以，安装时尽量不要改变gradle版本，可以通过改变组件的版本来适配
"react-native-scrollable-tab-view": "^0.10.0",  //0.7.0版本使用的是react的低版本（带proptypes属性的版本）会报错，后来升级到0.10.0就没问题了
"react-native-tab-navigator": "^0.3.4",  //0.3.3版本使用的是react的低版本（带proptypes属性的版本）
"react-native-swiper": "^1.5.14",  //
"react-native-vector-icons": "^5.0.0",  //之前用4.2.0版本会报Execution failed for task ':react-native-vector-icons:compileReleaseJavaWith 这个错误，后来升级到5.0.0版本就正常了
"react-navigation": "^1.5.11"  //该版本和其高版本对gradle版本的要求似乎不同，需要注意一下。
}

　　

这是我在网上下载的开源RN项目的依赖版本，供参考。这里使用的都是基于react低版本的（包括proptypes属性的版本）

"dependencies": {
    "react": "^16.0.0-alpha.12",//这里的react是低版本（包括proptypes属性的版本），所以其他组件都必须是使用低版本react的版本，否则会报错
    "react-native": "^0.45.1",
    "react-native-deprecated-custom-components": "^0.1.0",
    "react-native-scrollable-tab-view": "^0.7.4",
    "react-native-swiper": "^1.5.3",
    "react-native-tab-navigator": "^0.3.3",                                                                                                                                                                                                                                                                                                          
    "react-native-vector-icons": "^4.2.0"
  },

　　

安装问题：

react-native-vector-icons使用

 

第一步：安装react-native-vector-icons

这里通过yarn安装。yarn add react-native-vector-icons

第二步

react-native link

安装完成

 使用方式见官网：http://npm.taobao.org/package/react-native-vector-icons

 

 

 

3.Error:Could not find method google() for arguments [] on repository container

 该错误和gradle版本有关

修改gradle-wrapper.properties中的值

distributionUrl=https://services.gradle.org/distributions/gradle-3.3-all.zip

修改为

distributionUrl=https://services.gradle.org/distributions/gradle-4.1-all.zip

4.error: bundling failed: TypeError: Cannot read property 'bindings' of null

When upgrading to 0.56, make sure to bump your babel-preset-react-native package.json dependency to ^5.0.1 or newer.

　　

5.react-native-video ^3.0.0需要使用版本27 SDK和版本27.0.3 BuildTools，所以0.55.0版本的react-native不合适。可以通过升级react-native的版本修改改配置文件中sdk和gradle的版本或者直接修改sdk和gradle的版本（容易引发其他配置错误）。

6.error: bundling failed: TypeError: Cannot read property 'bindings' of null （升级到react-native 0.56版本时报的错误）

解决办法：

When upgrading to 0.56, make sure to bump your babel-preset-react-native package.json dependency to ^5.0.1 or newer.

　7.Unable to resolve module 'AccessibilityInfo', when trying to create release bundle（在react-native 0.56.0版本中报的错）

It seems like a bug in 0.56 related to dependencies. The "solution" is to find the correct combination of dependencies' versions. We found a workaround by installing those versions EXACTLY:

react-native >> 0.55.4
babel-core >> latest 
babel-loader >> latest
babel-preset-react-native >> 4.0.0
So you have to run those commands in order:

react-native init AwesomeProject
cd AwesomeProject
react-native run-android
npm uninstall react-native
npm install --save react-native@0.55.4
react-native run-android
npm install --save babel-core@latest babel-loader@latest
npm uninstall --save babel-preset-react-native
npm install --save babel-preset-react-native@4.0.0
react-native run-android

-------------------------------------------------------------------------------------------------------------------------------------

更新版本

 

如果你要知道现在React Native的最新版本

npm info react-native

 

 

假设现在拿到一个已经在很久以前写好的项目，或者自己的项目需要更新，或者RN更新了，这个时候我们需要对手上的项目进行更新，以使用更新的API。

这里有两个方法：

• 修改项目的package.json文件

  
  
   

  

   
  
  

  将那个“react-native”后面的版本改为当前最新版本 0.55.4，然后

  npm install
  

  完成以后，再次查看项目版本就会发现版本已经更新到指定版本了。

• 或者直接npm

  npm install --save react-native@0.55.4
  

版本更新好了之后，剩下的就是更新项目文件了

react-native upgrade

这个过程比较耗时，会进行一些文件的更改、替换操作。等待完成后，升级就完成了。

有的时候，发现最新版本的RN不稳定，需要回退。

上面两个方法随便选一个，改下版本号，同样的操作， 不赘述。

创建react-native项目

创建一般react-native项目：
react-native init 项目名称
创建指定版本的react-native项目
react-native init 项目名称 --version 0.55.4
注：--version 前面必须两个“-”

查看react-native版本
进入项目目录：

react-native -V
注：-V，V必须大写，可以通过react-native -h查看

 cd android 

gradlew clean  清除