React-Native踩坑记录

一时失言乱红尘 2022-09-10 01:18 321阅读 0赞

### 文章目录 ###

*  一、项目运行时，node窗口闪退导致红屏报错
 *  二、图片的另一种引入方式
 *  三、报错Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.
 *  四、报错Transform's input file does not exist: D:\\Projects\\react-native\\testNew\\node\_modules\\react-native-reanimated\\android\\react-native-reanimated-65-jsc.aar.
 *  五、报错Cannot find module 'which'
 *  六、zarm引入/报错缺少zarm相关文件
 *  七、报错device supports x86 but apk only supports armeabi-v7a

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

# 一、项目运行时，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文件夹，存放资源文件

使用：

需重新启动项目，可能出现资源合并问题（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，按需使用
            }
        }