创建日期: 2020年12月2日
补充日期:2021年1月10日
网络环境: 国外
参考:
ReactNative中文官网
官网例子
时隔多年,又要回归到ReactNative上了,作为复习笔记,重新来一次。
PS: 特别对不起之前进来的读者。因为创建文章的时候,误点了“发布”按钮,所以空文章被发布了。之后写了一部分,也完全忘记自己的文章被发布出去了,所以,导致很多人进来,只看见标题。深感抱歉。于是,抽空,把文章补全。其实官网写的很细致了,时间有限,这里就简单说下。主要是以大标题的方式,给初学的童鞋,指一条调查的方向和顺序。
1.搭建环境
1.1 Mac环境
参考链接,该链接里写的很清楚。
必须安装的工具有:Node、Watchman、Xcode 和 CocoaPods。
具体参考上面链接。
1.2 Windows环境
这个是在公司做的,是先安装了IDE–––VS Code,然后在VS Code上,打开终端,通过命令安装了scoop工具。其余的node,yarn都是通过scoop安装的。因为笔者是国外的网络环境,所以各位可以查下国内如何安装。
2.创建新项目
通过脚手架安装,React JS 有很多脚手架,RN的话,笔者没有调查,直接用官网提供的脚手架。另外,该脚手架是以JavaScript为开发语言搭建的。如果用TypeScript的,官网上也有相对应的脚手架,其实就是在JavaScript的基础上,添加了一些后缀,来配置TS(TypeScript)。
# AwesomeProject 是你的项目名称
npx react-native init AwesomeProject
3.编译并运行 React Native 应用(模拟器)
iOS:
因为最近在带新人,所以就不得不傻瓜式的提一嘴,一般的文章,都是以Mac系统为基础来讲解的,但是很多公司用的是windows系统。对于启动iOS模拟器,或者iOS真机安装这些,都需要你有一台苹果电脑,所以,你若是windows系统,请跳过该部分,直接看安卓模拟器的启动。
另外,因为yarn的运行速度要比npm快,所以现在一般都会选择用yarn。
# AwesomeProject是你刚才用脚手架创建项目时候的项目名称
cd AwesomeProject
# yarn install 这个命令到底需不需要呢?官网上没写,笔者记得最初的时候,脚手架里并没有提供相关库的安装,所以需要自己安装。
# 你运行了的话,不会错,你不运行的话,笔者没试过,是否可以运行起来。
yarn install
yarn ios
# 或者
yarn react-native run-ios
Android:
在启动安卓模拟器前,你需要安装android studio,用于开发安卓的IDE。当然,安装其他的IDE也是可以的,不过推荐你用android studio。安装好后,请查找一下安卓环境的配置方法,你需要安装各种SDK,配置JavaSDK的环境变量等等。待你创建一个默认的安卓项目,并可以启动模拟器的时候,请你保持模拟器已启动,然后运行下面命令,就可以了。
# AwesomeProject是你刚才用脚手架创建项目时候的项目名称
cd AwesomeProject
# yarn install 这个命令到底需不需要呢?官网上没写,笔者记得最初的时候,脚手架里并没有提供相关库的安装,所以需要自己安装。
# 你运行了的话,不会错,你不运行的话,笔者没试过,是否可以运行起来。
yarn install
yarn android
4.真机上运行
iOS:
iOS的话,需要你有开发者账户,要创建证书等等。调查一下“iOS 真机运行”就好。然后,build。其实,在你刚才用模拟器启动的时候,就已经完成了build。你把项目文件中的iOS文件夹(已经build后的),直接用Xcode打开,然后按照“iOS 真机运行”的方法,运行就可以了。
当成功连接真机,并且配置成功后,yarn ios
,是不是可以直接启动真机呢?安卓是可以的,iOS不记得了,没有尝试。理论上,应该是可以的。
Android:
只要连接上真机,打开开发者模式,运行yarn android
,就可以实现真机安装。如果安装的时候,出现问题,请查“安卓开发 真机运行”,看下具体操作步骤。笔者现有环境都是配置好的,而且是很久很久之前就配置好的,实在记不住了。
待更新的下一篇:
待你创建完第一个RN项目后,就要开始寻找顺手的调试工具。
Snack Player 是官网提供的,
还有google浏览器,
现在,大家最常用的应该是react-native-bugger,该调试工具集成了多个工具,分别对应了UI查看,断点调试,redux状态查看等。网上有很多该工具的使用。