search

vivipure / TIL

Today I learned
0 stars 0 forks source link

RN 开发问题汇总 #20

Open vivipure opened 2 years ago

vivipure commented 2 years ago

常见报错

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
vivipure commented 2 years ago

相关生态

  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
vivipure commented 2 years ago

注意事项

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

打包

安卓打包

在 android 目录执行命令

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

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

ios 打包

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

在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')