ReactNative学习笔记（二）环境搭建+初始化项目

前言

从上一篇笔记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

安装JDK的步骤 ↩
windows系统下安装JDK8 ↩
安卓sdk版本号与手机对应版本号 ↩

ReactNative学习笔记（二）环境搭建+初始化项目

1. Mac电脑

2. Windows+Android

你可能感兴趣的:(ReactNative学习笔记（二）环境搭建+初始化项目)