RN 开发问题汇总

Question

常见报错

1. java.io.IOException: Cannot run program “node”: error=2, No such file or directory

https://www.jianshu.com/p/2d180087e376

2. 打开 ios 项目构建时报错

使用 xcworkspace 文件打开项目，不要使用 xcodeproj 打开项目

3. 构建报错

查看报错原因，优先排查是否新增依赖。有则 npm i 然后 cd ios ， pod install

4. cocopads 下载失败

不使用 ruby gem 进行下载，使用 homebrew 进行下载

5. 第一次初始化 ios 项目报错，pod install 失败

遭遇 boost 文件无法通过 http 正常进行下载，可以找到镜像网站下载好对应依赖后，在依赖文件中从 文件中引用

6. 安卓真机预览时，无法热更新

使用 adb 进行端口映射 adb reverse tcp:8081 tcp:8081

7. 引入 SDK 后报错

引入 SDK 时注意 SDK 限制的架构，如果 SDK 对架构有限制，记得在 ndk 中声明

8. NativeEmitter 问题

iOS 端需要先 JS 端监听事件，再原生 sendEvent, 否则会报错 listener not regist , android 则不会有这个问题。因此处理时，可以将监听前置。

9. iOS 真机预览

需要设置开发者账号，如果真机预览时 iOS 版本过高无法正常预览，可以将对应的依赖下载好后放到 /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport

下载地址： https://github.com/filsv/iOSDeviceSupport

10. pod install za

TypeError: null is not an object (evaluating 'RNGestureHandlerModule.flushOperations')

android 更新 gradle ，ios 重新 pod install

11. pod install 下载 glog 报错

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

12. gradlew 执行错误

在个人文件夹（ (C:\Users\username.gradle 或 ~.gradle)）下创建 gradle.properties 文件，添加

org.gradle.jvmargs=-Xmx1024m -XX:MaxPermSize=256m

13. sdk 无法自动 link . undefined symbol arm64

到 Build Setting / Architectures / Excluded Architectures

添加 arm64

14. m1 执行 pod install 失败

sduo arch -x86_64 gem install ffi
arch -x86_64 pod install

15. m1 debug 模式无法启动

xcode 以 rosetta 模式运行

16. 'value' is unavailable: introduced in iOS 12.0

podfile

  post_install do |installer|
    react_native_post_install(
      installer,
    )
    # NOTE: Change IPHONEOS_DEPLOYMENT_TARGET to 12.4.
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.4'
      end
    end
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end

相关生态

1. 组件库： native-base
2. webview: react-native-webview
3. 状态管理： zustand
4. 图标： react-native-vector-icons
5. 表单： react-hook-form
6. 路由： reactnavigation/

业务相关

1. WiFi @react-native-community/netinfo
2. 启动图： react-native-splash-screen
3. 图片选择： react-native-image-picker
4. 分享： react-native-share

注意事项

1. PressAble 在 TouchableOpacity 外层无法触发点击时间
2. 将 position 设置为 absolute 后，要注意 同级 或者 父级同级 元素直接的层级关系，避免出现无法正常点击的问题
3. KeyboardAvoidingView 可以避免视图被输入键盘改动布局，但是内部如果有 position 为 absolute 的元素，还是会受到影响

打包

安卓打包

在 android 目录执行命令

./gradlew assembleRelease // apk
./gradlew bundleRelease // aab

生成的文件在： app/build/outputs/apk/release/ 目录下

ios 打包

1. 使用 XCode 进行 product -> archieve 打包
2. 选择对应渠道进行分发

在 axios 中使用 React Native Navigation

新增 navigate.ts

import { createNavigationContainerRef } from '@react-navigation/native'

export const navigationRef = createNavigationContainerRef()

export function navigate(name: any) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name)
  }
}

在 App 中挂在 Ref

<NavigationContainer ref={navigationRef}>

在拦截器中就能进行使用了

 navigate('Login')