react native笔记

date: 2017.03.23; modification:2018.06.23

目录:

1 填坑笔记

1.1 坑1: 自定义的Component找不到

例如: 自定义组件放在与index.android.js同目录的Header.jsx, 并且在index.android.js中引用:

import Header from './Header.jsx';

或者:

import Header from './Header';

这两种分别会报Header.jsx和Header找不到.

google和so了很久都没找到解决方案, 不知道为什么只有我自己遇到这问题, 最后自己瞎蒙着竟然解决了:

解决方法

文件需要命名为Header.js并且import不能加后缀名:

import Header from './Header';

个人猜测是因为react-native不能加后缀名, 会自动的添加后缀去找文件, 而它又不识别.jsx, 所以出现这错误.

1.2 坑2: 同样是自定义的Component找不到

import Header from 'component/Header';

受linux的调用命令行程序的路径方式影响, 感觉上面这句很合理, 但是在react中, 必须要写为:

import Header from './component/Header';

否则会告诉你找不到模块的.

1.3 坑3: 图片用require("./xxx.png")找不到

报错说找不到模块. 看到模块找不到的错误, 就一直往require本身上面想了, 以为它把图 片当做模块去加载了, 从这方面查了半天都没成功.

解决方法

后来看到默认贴出的目录结果, 才猛然醒悟, 原来我的js代码是在"工程目录 /src/Component/xxx.js"中引用的. 但是我的图片却是放在了工程目录下了, 并且我一直 把"./"当做了相对于工程目录, 但实际上应该是相对于引用图片的xxx.js的路径, 也就是 相对于src/Component/. 将图片拷贝到该目录, 就可以在"./"下找到了. 其实这和引入模 块的相对路径是差不多的.

1.4 坑4: 明明安装了模块, 但是还是找不到

如果是用live reload功能来自动重载, 可能会报该错误.

解决方法:

重新运行react-native run-android / ios 可能会解决.

1.5 坑5: Could not connect to development server.

明明是之前运行良好的工程, 却报此错误.

解决:

adb kill-server
然后再重新:
react-native start
react-native run-android

1.6 坑6: error: bundling failed: Error: Unable to resolve module ./src/app/App.js from /home/.../AwesomeProject/index.js

如果删除了什么东西又重装回来或者从git重新check出来, 而又没有重新运行react-native start的话, 可能会有这问题.

解决: 把react-native start关了重新运行试试.

1.7 坑7: Unable to load script from assets index.android.bundle

有时候在一个设备上调试是好的, 换另一个设备再调试, 就出这问题. 我是从android 6的手机上是好的, 换到android 4.4就不好了.

解决:

  1. 在项目目录下: mkdir 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

1.8 坑8: unable to load script from assets 'index.android bundle' ,make sure your bundle is packaged correctly or youu're runing a packager server

在android4.4上遇到了该问题, 在6.0上没遇到.

解决: 在react native项目目录下运行:

    mkdir android/app/src/main/assets

    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

有些版本可能是:

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

2 错误调试

2.1 redux navigation时, 报错: null is not an object (evaluating 'action.routeName')

null is not an object (evaluating 'action.routeName')
Module AppRegistry is not a registered callable module (calling runApplication)

原因: 导航目标的名称写的不对.

3 https证书不通过

搜索OkHttpClientProvider.java, 有可能在路径: ./node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/network/OkHttpClientProvider.java 修改该文件, 在其中找到下述代码:

return new OkHttpClient.Builder()
    .connectTimeout(0, TimeUnit.MILLISECONDS)
    .readTimeout(0, TimeUnit.MILLISECONDS)
    .writeTimeout(0, TimeUnit.MILLISECONDS)
    .cookieJar(new ReactCookieJarContainer())
    .build();

改为:

return new OkHttpClient.Builder()
    .sslSocketFactory(sslContext.getSocketFactory())
    .hostnameVerifier(new HostnameVerifier() {
        @Override
        public boolean verify(String hostname, SSLSession session) {
            return true; //忽略所有的认证,直接返回了true
        }
    })
    .connectTimeout(0, TimeUnit.MILLISECONDS)
    .readTimeout(0, TimeUnit.MILLISECONDS)
    .writeTimeout(0, TimeUnit.MILLISECONDS)
    .cookieJar(new ReactCookieJarContainer())
    .build();

摘自: http://lib.csdn.net/article/reactnative/55885

4 android下重新编译

rm android -rf
react-native eject
react-native link
react-native run-android

另一种说法:

cd android 
./gradlew clean
npm start --reset-cache

5 取消黄色警告框的显示

在index.js中加入:

console.disableYellowBox = true;

6 调试技巧

6.1 模拟按键

在没有menu键的手机上, 为了不去摇晃手机弹出菜单, 可以adb发送个menu按键:

adb shell input keyevent 82
如果上面的不管用, 试试:
adb shell input keyevent 2

有的时候自动reload不会触发, 可以手动adb发送reload:

adb shell input keyboard text rr

7 参考资料

官方文档: https://facebook.github.io/react-native/docs/getting-started.html

官方文档的中文译文: https://reactnative.cn/docs/0.51/getting-started.html