前言
从上一篇笔记ReactNative学习笔记（一）概念了解 了解了ReactNative与React的关系、RN的特点、与原生开发相比的优缺点后，我们就要开始正式学习ReactNative框架了——使用JavaScript和React编写原生移动应用
学习先从官方文档开始。React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面。
基本上就是用原生组件比如'View'和'Text'，来代替web组件'div'和'span'。
- 搭建开发环境
搭建开发环境
1. Mac电脑
根据开发人员所使用的操作系统、针对的目标平台（Android 、IOS）不同，具体步骤有所不同。但苹果公司目前只允许在Mac电脑上开发iOS应用。如果没有Mac电脑，只能先开发安卓应用了。
我们可以先看看，Mac电脑上搭建安卓的开发环境和搭建IOS的开发环境的流程有什么异同——
| 步骤 | IOS | Android |
|---|---|---|
| 安装依赖： | Node、Watchman、Xcode | Node、Watchman、JDK、安卓开发环境（Android Studio、Android SDK、配置 ANDROID_HOME 环境变量） |
| 创建新项目 | npx react-native init AwesomeProject | npx react-native init AwesomeProject |
| 准备设备 | 自动在 iOS 模拟器上运行应用,如果想在真机上运行，需阅读在设备上运行 | 真机或模拟器（使用usb线连接电脑，然后参考在设备上运行文档） |
| 编译并运行React Native应用 | yarn react-native run-ios （ iOS 模拟器自动启动并运行项目。） |
yarn react-native run-android （应用自动安装到设备上并开始运行） |
2. Windows+Android
我目前使用的Windows，打算先开发安卓。当前React Native最新版本号为0.61.5(但初始化项目时使用的是指定版本0.60.0)。
2-1. 更改npm，使用yarn代替npm
设置 npm 镜像（淘宝源）
# 使用nrm工具切换淘宝源
npx nrm use taobao
# 如果之后需要切换回官方源可使用
npx nrm use npm
#安装yarn
npm install -g yarn
2-2. 安装依赖
Node、Python2、JDK、安卓开发环境（Android Studio、Android SDK、配置 ANDROID_HOME 环境变量）
-
Node
Node版本需大于10
Node.js的安装可以参考我的文章——Windows环境Node.js的安装，安装后 node -v 查看版本。
Node.js自带npm，npm -v 查看版本。
查看版本号
-
Python
Python版本必须为2.x(不支持3.x)- 在python官网下载最新的pathon2版本，目前最新版本是2.7.17（Windows x86-64 MSI installer），点击安装；
- 在Windows设置环境变量：在系统变量Path中添加Python安装目录。
-
Java SE Development Kit (JDK)[1][2]
JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）- 在官网下载JDK1.8安装包(需要登录Oracle账户)； 点击安装
- 配置环境变量：
- 系统变量中增加JAVA_HOME，值为JDK的安装位置
- CLASSPATH，值为 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar
- 系统变量Path中添加%JAVA_HOME%\bin (这一条需要移到最前面 ，即Path中的第一个值)
-
安装、配置完成后可以查看一下java的版本验证是否安装成功——java -version
java -version
-
安卓开发环境
-
安装Android Studio
在android官网下载并安装最新版本的Android Studio，目前最新版本是3.5.3;
安装包安装完成后，start android studio，再在安装界面中选择"Custom"选项，确保选中了以下几项：Android Virtual Device（安卓模拟器，比较大，我认为可以暂时不勾选，后续再下载安装）、Android SDK、Android SDK Platform、Performance (Intel ® HAXM) -
Android SDK
Android Studio 默认会安装最新版本的 Android SDK
目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK（注意 ·SDK 版本不等于终端系统版本，RN 目前支持 android4.1 以上设备·）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK（android studio欢迎界面--底部Configure--SDK Manager）。
在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：
Android SDK Platform 28、Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）
然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。
最后点击"Apply"来下载和安装这些组件。 -
配置 ANDROID_HOME 环境变量
- 系统变量中增加ANDROID_HOME，值为Android SDK的安装位置；
- 系统变量中的Path增加一条%ANDROID_HOME%\platform-tools
-
2-3. 创建新项目
使用react-native初始化一个新的rn项目并指定版本号0.60.0（不指定版本号则会默认使用当前最新的稳定版本，目前最新0.61.5，但编译时会出错，搜索问题后 似乎最新版本的react-native-cli有问题，故指定版本为0.60.0）
项目名不要单独使用常见的关键字（如class, native, new, package等等），不要使用与核心模块名（如react, react-native等）。
Windows 不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！
项目路径中不要使用中文、空格等特殊符号。
npx react-native init AwesomeProject --version 0.60.0
2-4. 准备Android设备
- 真机
android机开启开发者模式，usb数据线连接android机和电脑 - 模拟器
在Android Studio中的AVDManager(Android Virtual Device Manager)中创建一个模拟器
tips: Android Studio打开项目时打开的应该是项目下的android文件夹
安卓sdk版本号与手机对应版本号[3]
|平台版本 |SDK版本 |版本名称|
|--|--|--|
|9.0 |28 | Pie (Android P)|
8.1 | 27 | Oreo(Android O)（奥利奥）
8.0 | 26 | Oreo(Android O)（奥利奥）
7.1 | 25 | Nougat(Android N)（牛轧糖）
7.0 | 24 | Nougat(Android N)（牛轧糖）
6.0 | 23 | Marshmallow(Android M)（棉花糖）
5.1 | 22 | Lollipop(Android L)（棒棒糖）
5.0 | 21 | Lollipop(Android L)（棒棒糖）
4.4 | 19 | KITKAT（奇巧巧克力）
4.3 | 18 | JELLY_BEAN_MR2(果冻豆)
4.2/4.2.2 |17 |JELLY_BEAN_MR1(果冻豆)
4.1/4.1.1 |16 | JELLY_BEAN(果冻豆)
4.0.3/4.0.4 |15| ICE_CREAM_SANDWICH_MR1(冰激凌三明治)
4.0/4.0.1/4.0.2 14 ICE_CREAM_SANDWICH(冰激凌三明治)
2-5. 编译并运行React Native应用
打包好的安装包会自动安装到真机或模拟器上并运行。
cd AwesomeProject
yarn react-native run-android
tips:要看项目中的console.log及其他日志可以在命令行中运行如下命令：
adb logcat *:S ReactNative:V ReactNativeJS:VcloneDeepWith
网友评论