react native开发环境搭建

安装教程简单，需要有一定的基础，仅供参考

一、背景

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，简单点说就是可以用它构建原生APP

二、安装配置

1.软件下载

以下是本机运行使用的react-native环境,所需软件需要自行下载安装
- Windows 10 专业版
- node版本 >= 4.5, now 8.9.9
- npm 3.3.3
- Android Studio: v >= 2.0 now 2.3
- jdk 1.8.0_131

注意：需要使用Android Studio 2.0或更高版本，node版本需要 >= 4.5，jdk >= 1.8，
给出软件版本可能会有误差,不愿麻烦可以参考我的版本

2.软件安装

Android Studio

软件包含Android SDK 和 模拟器，以下是安装需要特别注意的地方

1. SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image

2. 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须包含有这个版本。当然如果其他插件需要其他版本，你可以同时安装其他多个版本）。然后还要勾选最底部的Android Support Repository.

#

注意：下载Android SDK并配置环境变量（Android SDK Build-Tools 23.0.1）必须包含版本

Node.js

下载地址：https://nodejs.org/en/download/

3.环境配置

环境根据自己软件的安装目录自行配置
1.配置jdk环境变量

2.配置Android SDK环境变量
- %ANDROID_HOME%\tools;
- %ANDROID_HOME%\platform-tools

3.配置Node环境变量
- D:\Program Files\nodejs\

4.安装react-native

以下是我真实的安装过程

1） 开始安装

$ npm install -g yarn react-native-cli

2） 安装完yarn后同理也要设置镜像源：

$ yarn config set registry https://registry.npm.taobao.org –global

$ yarn config set disturl https://npm.taobao.org/dist –global

3） 创建项目

$ react-native init first-project

// error： “first-project” is not a valid name for a project.

$ react-native init firstProject

出现以下提示，项目创建完成

To run your app on iOS:
cd D:\AppWorkspace\reactNative\firstProject
react-native run-ios
- or -
Open ios\firstProject.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
cd D:\AppWorkspace\reactNative\firstProject
Have an Android emulator running (quickest way to get started), or a device connected
react-native run-android 

$ cd first-project

4）在模拟器上运行项目

$ react-native run-android

error： Command `run-android` unrecognized.
Make sure that you have run `npm install` and that you are inside a react-native project.

$ npm install

ERR：npm ERR! Cannot find module 'internal/util/types'
解决方法：删除目录“C:\Users\lyqhn\AppData\Roaming\npm\node_modules”下的npm文件夹

$ npm install -g npm

注意：没有上面的错误请忽略上条命令

$ react-native run-android

ERR: Checking the license for package Android SDK Build-Tools 23.0.1 in D:\Applications\Android\sdk\licenses

Warning: License for package Android SDK Build-Tools 23.0.1 not accepted.
该错误是因为之前的SDK不包含 Android SDK Build-Tools 23.0.1的版本

以上问题解决后再次执行命令

$ react-native run-android

注意：执行命令"react-native run-android"，需要先打开AVD

#

END: BUILD SUCCESSFUL.出现此提示后会将打包好的项目安装到AVD

5.others

1）单独启动模拟器，不需要打开Android Studio

• $ emulator -avd AVD-25

2）HelloWorld示例-App.js

import React, { Component } from 'react';
import {
  Text
} from 'react-native';

export default class App extends Component<{}> {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

3）不太明白

react-native中文网：http://reactnative.cn/docs/0.50/getting-started.html

最后，感谢您的阅读，有问题请及时给出您宝贵的建议