RN基本开发环境搭建

基础搭建

react-native init AwesomeProject 默认会下载最新的 RN 版本,启动 react-native run-ios or react-native run-android
iOS 真机启动步骤:

  1. Bundle Identifier改证书名,Version改版本号
  2. 选择 team 选择部署设备系统版本
  3. target 换到 Tests,取消勾选Allow testing Host Application APIs
  4. 选择 team,切换到 Build Settings 版本号切换为设备版本
  5. Info.plist App Transport Security Settings -> Allow Arbitrary Loads勾选为 yes
  6. RCTWebSocket.xcodeproj->RCTWebSocketExecutor.m localhost 替换为本机 IP
  7. Target 选择 Tests Build Phases-> Link Binry with Libraries -> + -> libRCTWebSocket.a->add
  8. cmd+r 真机运行,然后 iPhone 信任证书再运行一遍
    具体步骤及资料
  9. Android 环境下载 gradle 缓慢的问题。黏贴命令行里面的地址使用迅雷下载,然后将包拖到 chome 里面会得到一个 file 地址,这个地址替换项目中 android/gradle/wrapper/gradle-wrapper.properties 里面的 distributionUrl 注意加转义字符
  10. iOS 真机调试以上技巧 0.57.7 版本好使 0.58 不行 报不支持 arm64 的错。真机调试安装到 iPhone 之后 不用改 RCTWebSocketExecutor.m文件的 ip 地址依然能刷新修改后的代码。

RN 开发技巧

  1. React-Native 指定模拟器 RUN-IOS react-native run-ios --simulator "iPhone 7”
  2. MAC 查看端口号被占用及杀死进程。使用命令 lsof -i:port 查看端口号被哪个应用占用,找到 PID(port 是端口号),再使用命令 kill PID 结束应用(PID 是该应用的编号) 使用 lsof -i 命令可以查看所有进程.查看 mysql 的版本号:mysql -V
  3. RN 的 view 和 text 是不具备点击相应功能的,若要如此做,则需要用一个 TouchableHightlight 组件进行包裹。
  4. react-native start --port=8088指定端口号

RN 开发问题

  1. 在使用 react-native-tab-navigator 组件的时候启动报如下错误:Error: Cannot find module 'asap/raw',执行npm i

  2. 使用react-navigation报错undefined is not an object (evaluating 'RNGestureHandlerModules.State')yarn add react-navigationandyarn add react-native-gesture-handler (:з ゝ ∠)

  3. ★★★ 重点问题 启动安卓的项目报错。 首先是 gradle 下载很慢 看上面基础搭建第 9 条。其次是 gradle.3.2.1.pom 一直卡住下载不了,首先关闭 shadowsocks 和各种代理试试,build.gradle文件里面加上 google()maven { url 'https://maven.google.com' }试试,如果都不行的话 cd 到桌面 vi .gradle/gradle.properties删除里面的代理代码

    1
    2
    3
    4
    systemProp.http.proxyHost=hostname
    systemProp.http.proxyPort=8080
    systemProp.http.proxyUser=de\\username
    systemProp.http.proxyPassword=xxx
Author: XavierShi
Link: https://blog.xaviershi.com/2018/12/06/RN基本开发环境搭建/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.