React-native挖坑记

React Native 搭建开发环境官方文档：reactnative.cn/docs/0.51/g…

环境搭建成功后按照官方文档 输入以下命令：

react-native init doubanRN //创建一个名字为AwesomeProject

cd doubanRN // 进入AwesomeProject目录

react-native run-android // 在安卓设备上安装应用

问题1：Cannot find entry file index.android.js in any of the roots

解决方法：

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/

之后在assets 下会创建两个文件index.android.bundle 、 index.android.bundle.meta

问题2：重新react-native run-android 会报错： could not connect to development server. Try the follwing to fix the issue:*

解决方法：

1. 摇晃设备弹出开发者菜单， 选在Dev Setting 输入计算机的内网IP 和服务的端口号 如：192.x.x.x:8081

2. 在使用npm start 运行项目 （推荐用yarn）

3. 在设备上打开开发者菜单 点击Reload 此时修改app.js 在设备上会加载改变的内容。

确保你的设备已经成功连接。可以输入adb devices来查看:

$ adb devices 
List of devices attached 
14ed2fcc device # 真实设备

问题:3. image.png

解决方法：

1. npm install -g watchman
2. node node_modules/react-native/local-cli/cli.js start

问题4. UnableToResolveError: Unable to resolve module AccessibilityInfo

解决方法：

npm uninstall react-native
npm install --save react-native@0.55.4
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 start

问题5： TextInput输入框在android默认会有下划线

解决方法：

设置下划线透明：
underlineColorAndroid="transparent"

如：

<TextInput 
  style={styles.input} 
  {...this.props} 
  underlineColorAndroid="transparent"
/>