安装教程简单,需要有一定的基础,仅供参考
一、背景
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 和 模拟器,以下是安装需要特别注意的地方
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
在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