React Native (Mac + iPhone Simulator)调试篇

这篇文档主要是为了帮助搭建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”。