這篇文檔主要是為了幫助搭建React Native示例程序和調(diào)試環(huán)境而寫淋肾。
npx react-native info:
? ? react: 16.13.1 => 16.13.1?
? ? react-native: 0.63.2 => 0.63.2
我的環(huán)境配置：
1. MacOS 10.14.5 操作系統(tǒng)
2. 本機(jī)已經(jīng)裝好了 NodeJS, Python
3. 以官方文檔?http://reactnative.dev/docs/environment-setup 作為參考
4. 當(dāng)前React Native 版本是0.63.2
詳細(xì)配置：
官方提供兩種方式來生成React Native示例程序搪缨，一個(gè)是基于Expo朋魔，另一個(gè)是傳統(tǒng)方式。
1. 第一種方式 Expo渗常，適合于新手，我這里不做闡述七咧。
2. 第二種方式是傳統(tǒng)方式贷笛，參照React Native CLI Quickstart踏施。
以下依賴需要提前安裝：
brew install node
brew install watchman
Xcode & CocoaPods
之后開始初始化應(yīng)用程序：
npx react-native init AwesomeProject
npx react-native start
啟動(dòng) Metro Bundler.
Metro Bundler （JS Server）
其中遇到一個(gè)問題：
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'"
這里需要加個(gè)bundle石蔗，在Xcode加入
關(guān)于端口
Expo的端口默認(rèn)是19001，基本不會(huì)與其他程序沖突畅形。
第二種方式啟動(dòng)的話默認(rèn)端口是8081养距，與我本地的MaCfee端口沖突，又關(guān)不掉MaCfee日熬，所以只好棍厌，切換端口啦。
兩個(gè)地方需要改變
1.??metro.config.js:
server: {
? ? port: 18088,
? },
2.? 模擬器的調(diào)試設(shè)置碍遍，設(shè)置新的地址：
localhost:18088
之后再跑，端口就變了阳液。
調(diào)試
?VSCode調(diào)試
首先在Extensions搜索“React Native”怕敬，安裝插件。
Settings in VSCode
最后修改package.json
"ios": "react-native run-ios --port=18081"
npm run ios帘皿，Metro Bundler 啟動(dòng)东跪，同時(shí)彈出iPhone Simulator。
VSCode里打開Debug “Attach to Packager”。
