这篇文档主要是为了帮助搭建React Native示例程序和调试环境而写。
npx react-native info:
react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2
我的环境配置:
1. MacOS 10.14.5 操作系统
2. 本机已经装好了 NodeJS, Python
3. 以官方文档 http://reactnative.dev/docs/environment-setup 作为参考
4. 当前React Native 版本是0.63.2
详细配置:
官方提供两种方式来生成React Native示例程序,一个是基于Expo,另一个是传统方式。
1. 第一种方式 Expo,适合于新手,我这里不做阐述。
2. 第二种方式是传统方式,参照React Native CLI Quickstart。
以下依赖需要提前安装:
brew install node
brew install watchman
Xcode & CocoaPods
之后开始初始化应用程序:
npx react-native init AwesomeProject
npx react-native start
启动 Metro Bundler.
Metro Bundler (JS Server)
其中遇到一个问题:
No bundle URL present
https://medium.com/@onexlab.io/no-bundle-url-present-fixed-ca2688a80f66
在package.json里:
"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
这里需要加个bundle,在Xcode加入
关于端口
Expo的端口默认是19001,基本不会与其他程序冲突。
第二种方式启动的话默认端口是8081,与我本地的MaCfee端口冲突,又关不掉MaCfee,所以只好,切换端口啦。
两个地方需要改变
1. metro.config.js:
server: {
port: 18088,
},
2. 模拟器的调试设置,设置新的地址:
localhost:18088
之后再跑,端口就变了。
调试
VSCode调试
首先在Extensions搜索“React Native”,安装插件。
Settings in VSCode
最后修改package.json
"ios": "react-native run-ios --port=18081"
npm run ios,Metro Bundler 启动,同时弹出iPhone Simulator。
VSCode里打开Debug “Attach to Packager”。