React-Native踩坑记录

---

一、项目运行时，node窗口闪退导致红屏报错

在该项目文件夹下找到node_modules\metro-config\src\defaults\blacklist.js（如找不到，也可以在node_modules/metro/src/blacklist.js。在该文件中进行相同的更改。）

修改
var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];
为
var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

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/
执行成功会在android\app\src\main\assets下生成如下两个文件
3.重新执行react-native run-android()

二、图片的另一种引入方式

打包后存在手机的本地，会使安装包体积变大（\android\app\build\outputs\apk）

在\android\app\src\main\res\目录下新建drawable文件夹，存放资源文件

使用：

<Image source={{uri:'picName'}} style={styles.img}/>

需重新启动项目，可能出现资源合并问题（java.io.IOException),需清除缓存

1.关闭模拟器项目
2.cd android
3.gradlew clean
4.退回项目根目录
5.重新执行yarn react-native run-android
如出现错误，可删除\android\app\下build文件或重新执行一次(资源名称只能包含小写的a-z、0-9或下划线)

三、报错Invariant Violation: requireNativeComponent: “RNCSafeAreaProvider” was not found in the UIManager.

尝试安装 react-native-safe-area-view。
$ yarn add react-native-safe-area-view
并重新安装 pod。
$ npx pod-install ios
然后，启动 react-native。

四、报错Transform’s input file does not exist: D:\Projects\react-native\testNew\node_modules\react-native-reanimated\android\react-native-reanimated-65-jsc.aar.

这是因为安装包里没有65版本的

yarn add react-native-reanimated@2.3.0-alpha.2

五、报错Cannot find module ‘which’

npm update

六、zarm引入/报错缺少zarm相关文件

.babel文件
{
	...
	plugins: [
    [
      'import',
      {
        libraryName: 'zarm',
        style: true,
      },
    ],
  ],
}
npm install babel-plugin-import --save-dev
/yarn add babel-plugin-import

七、报错device supports x86 but apk only supports armeabi-v7a

在build.gradle
defaultConfig {
        ...
        ndk {
            abiFilters "armeabi-v7a",'arm64-v8a',"x86", //自4.8.8版本开始支持arm64-v8a，按需使用
        }
    }

八、沉浸式导航栏导致底部留白，遮罩层高度不够

根据页面需要设置遮罩层高度 = 屏幕高度 + StatusBar.currentHeight

九、ios Image不显示http类型的图片

1, 打开Xocde, 选中 info.plist
2, 在 App Transport Security Settings 选项内点击判断的+号图标
3, 添加 Allow Arbitrary Loads, 并且设置值为 YES 4, 重新运行
5，在模拟器上 系统设置(Settings) -> Developer -> Allow HTTP Services这个打开

十、Android9.0以上打包apk后http请求不到

在AndroidManifest文件的application设置

android:usesCleartextTraffic="true"

十一、安卓打包

cd android/
./gradlew clean 
./gradlew assembleRelease

十二、new Date在不同机型识别不同格式

相关内容

十三、Invariant Violation: Tried to register two views with the same name RNCWebView

//检查
npm ls react-native-webview

重新安装“react-native-webview-leaflet”的概率，因为“react-native-webview”的更新。

十四、部分安卓手机navigation.navigate闪退

从首页的弹窗进入表单页面，莫名其妙出现闪退，多番测试后发现是navigation.navigate(‘Home’)这句代码出现了问题，找了一番说是越级跳转导致的闪退，可参考点击查看

十四、TextInput输入框未收起时跳转页面出现闪退

import {...Keyboard} from 'react-native';
Keyboard.dismiss();
。。。。