RN开发环境搭建

RN环境有两种:原生环境和简易沙盒环境,沙盒环境大量依赖国外网络环境,不能直接发布应用,只适用于学习、演示。原生环境的搭建过程和开发平台以及目标平台息息相关。不同的开发平台和目标平台,在搭建开发环境中有一定的出入。本文分三部分介绍不同开发平台和目标平台的搭建:第一部分,macOS系统下的iOS项目;第二部分,macOS系统下的Android项目;第三部分,windows系统下的Android项目。

本篇介绍macOS系统下的iOS项目的RN开发环境搭建

RN必须安装的依赖:node、watchman、React Native命令行工具、Xcode。接下来一步一步安装必须的依赖。

本文通过Homebrew工具安装,如果没有安装Homebrew的请先安装brew,关于Homebrew的更多信息请访问https://brew.sh/index_zh-cn

安装:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
卸载:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
更新:
brew update

安装完brew工具之后,我们先安装node

brew install node

接下来我们安装watchman,watchman是由Facebook提供的监视文件系统变更的工具,该工具可以提高开发时的性能。

brew install watchman

由于访问npm国外镜像资源受限,一般我们都将npm镜像设置为国内的

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

接下来安装一个Facebook提供的替代npm的工具,加速node模块下载的yarn

npm install -g yarn react-native-cli

安装完yarn后同样设置镜像

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

以上依赖工具安装完成后,检查Xcode版本号是否为9.4或更高的,并且检查是否有某个版本的command line tools

至此,react native的环境已搭建完成,接下来我们创建一个React Native工程并运行

react-native init testProject --version 0.44.3

注意:init命令会默认创建最新版本,而0.45及以上的版本需要下载boost等几个第三方库,这些库翻墙也能难下载成功,这里我们先创建一个0.44.3的版本。使用--version 参数可以创建指定版本的项目,这个版本号必须精确到两个小数点。此外,创建的工程的路径为终端当前所在路径~~

创建完可以用Xcode打开iOS工程编译检查工程是否存在问题,也可以用Xcode运行工程,还可以用命令行运行

cd testProject
react-native run-ios

如果发现报: error: unable to find utility "instruments", not a developer tool or in PATH这样的错误,在终端执行如下命令即可

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

在创建0.45以后版本的项目时候如果报“RCTBundleURLProvider.h” file not found 可以尝试在项目根路径下执行如下命令

npm install --save react-native-vector-icons@4.0

好了,环境搭建完成,放心大胆的开发吧~~~~~

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1 NodeJS开发环境 2 React Native Command Line Tools 工具 3 Xcode...
    hliccy阅读 4,214评论 0 0
  • 声明:此文不止步于RN开发环境的搭建,当我写这篇文章时其实已浏览过RN 官方绝大部分文档和做RN开发所具备的技能。...
    deqiutseng阅读 3,017评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,486评论 25 709
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,056评论 3 119
  • 从学校到网吧要经过一条小路,这条路平常基本没人走,只有在上学放学的时候才会有大批大批的学生从这里经过。以前亚晨都是...
    蓝天航空幼儿园阅读 1,810评论 0 2

友情链接更多精彩内容