最近想在项目中实现跨平台，对比一下主流的实现方式，选用了React Native。参考网上的教程，对于一直都是原生移动端开发，对前端的知识不是很了解的，感觉入门不是特别简单。于是打算把学习React Native的过程记录下来。
环境配置
基本参考React Native中文网搭建开发环境教程
安装流程就不详细写了，毕竟平台不同，系统原有软件的版本也不同，就算再详细下出来，也很难涉及全，可参考价值不大，况且React Native中文网写得很全面了。
我自己homebrew，Node，Android Studio之前都安装过了，基本不需要改动，就可以直接使用。网络方面，使用梯子，也一切顺利。
基本流程
- 安装Homebrew
- 用homebrew安装node
- 安装Yarn，react-native-cli
- 安装Xcode，macos都有
- 安装Watchman
- 安装Android Studio，Android SDK，Java环境，模拟器
- 安装webstorm开发工具
输出版本号判断是否安装成功
1234567891011121314151617181920212223 |
? ~ brew -vHomebrew 1.6.0Homebrew/homebrew-core (git revision 47aeb6; last commit 2018-04-12) ? ~ node -vv8.11.1 ? ~ xcodebuild -versionXcode 9.3Build version 9E145 ? ~ watchman -v4.9.0 ? ~ java -vUnrecognized option: -vError: Could not create the Java Virtual Machine.Error: A fatal exception has occurred. Program will exit. ? ~ java -versionjava version "1.8.0_112"Java(TM) SE Runtime Environment (build 1.8.0_112-b16)Java HotSpot(TM) 64-Bit Server VM (build 25.112-b16, mixed mode) |
编译项目测试运行环境
1234567 |
创建名称为AwesomeProject的项目? ~ react-native init AwesomeProject? ~ cd AwesomeProject 运行Android 项目? ~ react-native run-android 运行IOS 项目? ~ react-native run-ios |
运行效果
看到Welcome to React Native，表示搭建开发环境，创建，运行React Native应用完成。为啥不是显示hello world呢！！！
错误点
- Error: Your Xcode (8.2) is too outdated.
由于刚刚升级了Mac OS为10.3，Xcode没有更新到，现在提示该错误，直接在App Store升级Xcode就可以了。
- warni 大专栏 我们一起学React Native(一)：环境配置ng You are using Node “7.7.1” which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: “^4.8.0 || ^5.7.0 || ^6.2.2 || ^8.0.0”
Node版本不符合，有warning提示，那就重新Node版本吧
1234567891011121314
查找有效的node版本，打钩表示已经安装上的? ~ brew search node==> Searching local taps...node ? libbitcoin-node [email protected] nodeenv[email protected] ? llnode [email protected] nodenvleafnode node-build nodebrew 断开当前版本? ~ brew unlink node# 安装node8版本? ~ brew install [email protected]# 连接新安装的node8版本，后续切换也是通过这种方式? ~ brew link [email protected]# 显示当前版本是否正确? ~ node -version
端口占用出错
- unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server
后来发现，不需要生成
index.android.bundle文件也可以解决该问题，具体看错误6- 创建assets文件
1
? AwesomeProject mkdir android/app/src/main/assets
- 生成
index.android.bundle文件
1
? AwesomeProject 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/
- 重新编译运行
1
? AwesomeProject react-native run-android
- 创建assets文件
- The development server returned response error code:404
该问题与上面的，应该是有联系的。上面的问题解决后，点开菜单，设置
Enable Hot Reloadding出现了错误，提示如下。React Native怎么问题那么多？？？回想上一周创建项目的时候，都没有这些问题，也没有去创建index.android.bundle文件，一切正常。一直发现不知道什么问题，就先忽略不去管它，然后，修改
App.js的代码，发现修改后，重新运行，一点效果都没有？？？仔细看发现，运行的时候，终端出现了下面的错误。 - js server not recognized, continuing with build
该问题的出现，是因为端口被占用了，默认是用8081的端口。
123456
# 查看端口占用? lsof -i:8081COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEnode 58043 guidongyuan 20u IPv6 0x4c86dd8abf88c407 0t0 TCP *:sunproxyadmin (LISTEN)、# kill掉占用的进程? ~ kill -9 58043
重新编译运行就可以了
通过该方式修复了问题错误4和5后，发现把错误3中为了修复错误新增的文件删除掉，也不会出错。看来都是端口的问题。
原文地址：https://www.cnblogs.com/lijianming180/p/12041464.html