React Native 爬坑记录

React Native问题记录

背景：使用React Native来开发一个日报App（现仅有android端），所以下面的记录都是在弄android端遇到的问题与相应的处理

0. 搭建环境

搭建环境的指导可参考 https://reactnative.cn/docs/0.43/getting-started/

1. 找不到index.android bundle

错误信息：unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or you’re running a packager server.

按照教程init项目后，有时会出现这种情况，需要手动操作。（react-native新版本已经没有index.android.js和index.ios.js两个文件了，只有一个index.js文件）

• 解决方法：
  1. 在android/app/src/main 目录下创建一个 assets空文件夹
  2. 在项目根目录运行：

     react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
     

  3. 在项目根目录，重新跑项目

     react-native run-android
     

2. dev连不到NodeJS服务器

错误信息：dev server returned error code 403 react native.

• 解决方法：
  1. 给dev server设置新port(这里我用的是9090)
     - 运行react-native run-android --port=9090
     - 或者在项目\node_modules\react-native\local-cli\server\server.js设置port为9090，运行 react-native run-android
  2. 运行adb -s emulator-5554 reverse tcp:9090 tcp:9090
     - 5554是emulator port（运行adb devices可查看）
     - 9090是server port
  3. 运行react-native run-android
  4. 设置emulator的Dev server路径
     • Ctrl + M打开设备菜单
     • 选择Dev Settings
     • Debugging->Debug server host & port for device
     • 输入url+port：10.0.2.2:9090

3. 无法访问HTTP

无法访问HTTP，IOS和高版本中（安卓9）网络安全配置默认不允许HTTP，若需要访问HTTP，需要做一些调整

• 解决方法：
  • IOS：https://segmentfault.com/a/1190000002933776
  • android
  1. 在res/xml目录下新建xml文件network-security-config.xml

       <?xml version="1.0" encoding="utf-8"?>
       <network-security-config>
           <base-config cleartextTrafficPermitted="true">
               <trust-anchors>
                   <certificates src="system" />
               </trust-anchors>
           </base-config>
       </network-security-config>
     

  2. 在Manifest.xml文件中使用配置

     	<?xml version="1.0" encoding="utf-8"?>
     	<manifest ... >
     	    <application android:networkSecurityConfig="@xml/network_security_config">
     	    </application>
     	</manifest>
     

4. 缺少RNGestureHandlerModule 模块

错误信息：null is not an object (evaluating RNGestureHandlerModule.State’)

• 解决方法：
  1. 运行yarn add react-navigation下载react-natigation模块
  2. 运行react-native link
  • 仍出错，则因为缺少RNGestureHandlerModule 模块
  3. 运行yarn add react-native-gesture-handler
  4. 运行react-native link
  5. 修改文件：
     -MainApplication.java

     	import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
     	...
     	protected List<ReactPackage> getPackages() {
           return Arrays.<ReactPackage>asList(
                   new RNGestureHandlerPackage(),new MainReactPackage() // 增加new RNGestureHandlerPackage()
           );
         }
         ...
     

     -settings.gradle

     	...
     	include ':app'
     	include ':react-native-gesture-handler'
     	project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
         ...
     

     -build.gradle(Module:app)

     	...
     	dependencies {
     	    compile project(':react-native-gesture-handler') // 增加
     	    implementation fileTree(dir: "libs", include: ["*.jar"])
     	    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
     	    implementation "com.facebook.react:react-native:+"  // From node_modules
     	}
     	...
     

5. react-navigation 3 需要app container

错误信息：Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 you must set up your app container directly

• 解决方法：

  const AppStackNavigator = createStackNavigator({
    Login: LoginScreen,
    Home: HomeScreen,
  });
  
  const AppStack = createAppContainer(AppStackNavigator); // 使用<AppStack />