【React Native开发01】React Native从环境搭建到项目生成这一篇就够了_react native项目生成

你将学会react_native环境（window平台）搭建，项目生成导入遇到的问题及解决方案。
1

使用理由及背景介绍

facebook开源的一套用于开发移动端跨平台App的技术框架，其基础组件是原生组件而非web组件，[官网](https://github.com/facebook/react-native "官网地址")
1

优点

• 跨平台，Android,ios同时开发，开发成本低
• 无需java,oc语言基础
• 性能高，代码复用率高
• 动态跟新

开发工具选择

• WebStorm(推荐不需插件)
• Nuclide+Watchman(Mac)
• Sublime

环境搭建

安装必要的软件

Chocolatey

介绍

windows上的包管理器类似于linux上的yum和 apt-get，下面的软件都通过这个命令行安装，一行代码即可安装），

安装方法（以管理员身份打开cmd(C:\Windows\System32文件下的cmd)）

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
1

Python 2

安装：cmd:（目前不支持Python 3版本）

choco install python2

Node.js

目前已知Node 7.1版本在windows上无法正常工作，请避开这个版本！
1

安装方法：

choco install nodejs.install

单独安装；

软件地址

• 检查：（cmd查看版本，完成标识出现版本号标识）

  npm -v

java

前提：

jdk要求：jdk1.8或更高

检查版本：

javac -version

安装方法：

choco install jdk8

或

apt-get install default-jdk

studio

提供

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

安装要求

2.0或更高

软件下载

安装注意

1. 不改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。
2. 确定所有安装都勾选了，尤其是Android SDK和Android Device Emulator。
3. 在初步安装完成后，选择Custom安装项（见图）：
   
4. 确定所有安装都勾选了，尤其是Android SDK和Android Device Emulator。
5. 检查已安装的组件，尤其是模拟器和HAXM加速驱动（图）
   
6. 安装完成后，在Android Studio的欢迎界面中选择Configure | SDK Manager。
   
   
   
   
   

Yarn、React Native的命令行工具（react-native-cli）

简介

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具
用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

安装

npm install -g yarn react-native-cli

镜像加速

1、加速原因：

由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。
请先将npm仓库源替换为国内镜像 
1
2

2、加速方法：

• 通过config命令

  npm config set registry https://registry.npm.taobao.org

  npm info underscore

  检查（（如果上面配置正确这个命令会有字符串response））：

• 命令行指定

  npm --registry https://registry.npm.taobao.org info underscore

• 手动添加

（找到Node.js的安装目录我的C:\Program Files\nodejs\node_modules\npm文件下npmrc文件里加）

registry = https://registry.npm.taobao.org
1

如果你遇到EACCES: permission denied权限错误，可以尝试运行下面的命令（限linux系统）：

sudo npm install -g yarn react-native-cli
1

XCode

Gradle Daemon

安装（cmd输入）

(if not exist “%USERPROFILE%/.gradle” mkdir “%USERPROFILE%/.gradle”) && (echo org.gradle.daemon=true >> “%USERPROFILE%/.gradle/gradle.properties”)

作用

极大地提升java代码的增量编译速度。

git

安装

choco install git

环境变量

ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径

Android SDK的Tools目录添加到PATH变量中

你可以把Android SDK的tools和platform-tools目录添加到PATH变量中（逗号隔开），
以便在终端中运行一些Android工具，例如android avd或是adb logcat等

创建第一个项目

这里在真机运行（真机模拟器只能连一个，你可以成功创建一个空白项目）
1

检验adb是否连接

    cmd输入 adb devices ,出现下图成功
1

问题集锦

    1、在真机上运行时可能会遇到白屏的情况，请找到并开启悬浮窗权限
    2、  提示 你还可以运行react-native run-android --variant=release来安装release版的应用。当然你需要先配置好签名，且此时无法再开启开发者菜单。注意在debug和release版本间来回切换安装时可能会报错签名不匹配，此时需要先卸载前一个版本再尝试安装。
    3、调用开发者菜单方法-->摇晃手机（重新加载、调试，等等…）
    4、在启用开发服务器的情况下，你可以快速的迭代修改应用，然后在设备上查看结果。按照下面描述的任意一种方法来使你的运行在电脑上的开发服务器可以从设备上访问到。
        1、注意大部分现代的安卓设备已经没有了硬件"Menu"按键，这是我们用来调出开发者菜单的。在这种情况下你可以通过摇晃设备来打开开发者菜单(重新加载、调试，等等……)
        2、(Android 5.0及以上)使用adb reverse命令（注意，这个选项只能在5.0以上版本(API 21+)的安卓设备上使用。）首先把你的设备通过USB数据线连接到电脑上，并开启USB调试（关于如何开启USB调试，参见上面的章节）。
        运行adb reverse tcp:8081 tcp:8081
        不需要更多配置，你就可以使用Reload JS和其它的开发选项了
    5、(Android 5.0以下)通过Wi-Fi连接你的本地开发服务器
        1、首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
        2、在设备上运行你的React Native应用。和打开其它App一样操作。
        3、你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
        4、摇晃设备，或者运行adb shell input keyevent 82，可以打开开发者菜单。
        5、点击进入Dev Settings。
        6、点击Debug server host for device。
        7、输入你电脑的IP地址和端口号（譬如10.0.1.1:8081）。在Mac上，你可以在系统设置/网络里找查询你的IP地址。在Windows上，打开命令提示符并输入ipconfig来查询你的IP地址。在Linux上你可以在终端中输入ifconfig来查询你的IP地址。
        8、回到开发者菜单然后选择Reload JS。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

创建步骤

1、react-native init SampleAppMovies

这个命令会初始化一个工程、下载React Native的所有源代码和依赖包，最后在SampleAppMovies/iOS/SampleAppMovies.xcodeproj和SampleAppMovies/android/app下分别创建一个新的XCode工程和一个gradle工程。 
1

2、进入工程目录 cd SampleAppMovies

3、Android上运行 react-native run-android

4、拓展创建指定版本项目（注意版本号必须精确到两个小数点） react-native init MyApp --version 0.39.2