React Native学习之适配Android/IOS总结篇 | 前端进阶之旅

# 一、环境搭建

环境：MacOS

# 如果你已经安装了 Node，请检查其版本是否在 v8.3 以上
brew install node 

# Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能
brew install watchman

@前端进阶之旅: 代码已经复制到剪贴板

npm install -g yarn react-native-cli

@前端进阶之旅: 代码已经复制到剪贴板

1. 创建新项目

init 命令默认会创建最新的版本，而目前最新的0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行iOS项目。可以暂时创建0.44.3的版本

react-native init MyApp --version 0.44.3

@前端进阶之旅: 代码已经复制到剪贴板

2. 编译并运行 React Native 应用

1). 运行方式一 在你的项目目录中运行react-native run-ios

cd MyApp
react-native run-ios

@前端进阶之旅: 代码已经复制到剪贴板

2). 运行方式二 在xCode中运行

打开xcode选择项目中myApp/ios/myApp.xcodeproj，然后点击左上角运行即可

更多详情 https://reactnative.cn/docs/getting-started.html

3. 远程调试

Enable Live Reload

当你的js代码发生变化后，React Native会自动生成bundle然后传输到模拟器或手机上

在浏览器中打开

环境：MacOS

# 如果你已经安装了 Node，请检查其版本是否在 v8.3 以上
brew install node 

# Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能
brew install watchman

@前端进阶之旅: 代码已经复制到剪贴板

npm install -g yarn react-native-cli

@前端进阶之旅: 代码已经复制到剪贴板

1. 创建新项目

init 命令默认会创建最新的版本，而目前最新的0.45 及以上版本需要下载 boost 等几个第三方库编译。这些库在国内即便翻墙也很难下载成功，导致很多人无法运行iOS项目。可以暂时创建0.44.3的版本

react-native init MyApp --version 0.44.3

@前端进阶之旅: 代码已经复制到剪贴板

2. 编译并运行 React Native 应用

1). 运行方式一 在你的项目目录中运行react-native run-ios

cd MyApp
react-native run-ios

@前端进阶之旅: 代码已经复制到剪贴板

2). 运行方式二 在xCode中运行

打开xcode选择项目中myApp/ios/myApp.xcodeproj，然后点击左上角运行即可

更多详情 https://reactnative.cn/docs/getting-started.html

3. 远程调试

Enable Live Reload

当你的js代码发生变化后，React Native会自动生成bundle然后传输到模拟器或手机上

在浏览器中打开