window系统安装react native开发环境

责编:menVScode 2018-04-18 21:30 阅读(390)

react native 英文官网:http://facebook.github.io/react-native/docs/getting-started.html

react native 中文官网:https://reactnative.cn/


window系统安装react native开发环境

【1】安装node、Python2、JDK

安装node可查看此篇:http://menvscode.com/detail/5a9f75c082c7203192ca5237

安装Python2:python官网下载 python 版本为2.x.x进行安装,https://www.python.org/downloads/,本文采用的python版本为2.7.12。

安装Java SE Development Kit (JDK):java开发的运行环境,下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

注意:在下载之前先同意其协议,然后选择对应的版本。

QQ截图20180418214818


【2】全局安装 react-native-cli

npm install -g react-native-cli


【3】安卓开发环境配置

(1)下载安装 Android Studio

官网:https://developer.android.com/studio/index.html;其他网站:http://www.android-studio.org/

QQ截图20180418223352

(2)启动Android Studio

QQ截图20180418223919

QQ截图20180418223758

QQ截图20180418224201

尽可能的勾选上所以的选项,如果有些选项呈现灰色不可勾选状态的话,后面操作也可以进行勾选操作。

QQ截图20180418224414

下载相关文件,等待时间较长。

QQ截图20180418230941

(3)安装 Android SDK

点击“Configure”,选择“SDK Manager”

QQ截图20180418231245

选择“SDK Platforms”,再点击“Show Package Detail”。

找到“Android 6.0 (Marshmallow) ”,勾选:Google APIs、Android SDK Platform 23、Intel x86 Atom_64 System Image、Google APIs Intel x86 Atom_64 System Image。

QQ截图20180418231949

选择“SDK Tools”,再点击“Show Package Detail”。

勾选“ 23.0.1”。

QQ截图20180418232648

最后点击“Apply”,安装 Android SDK,等待时间较长。

QQ截图20180418233920


【4】配置  ANDROID_HOME 环境变量

QQ截图20180418234630


【5】生成/初始化项目应用

项目名首字母大写、驼峰式命名。

react-native init AwesomeProject

安装成功后

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

启动项目前,要检查有没有一个安卓的模拟器在运行,用“adb devices”命令

>adb devices
List of devices attached
* daemon not running; starting now at tcp:5037
* daemon started successfully
//结果显示没有一个AVD在运行,AVD就是模拟器的设备


【6】配置AVD模拟器的设备

打开 Android Studio,并打开项目

QQ截图20180421013839

点击 event log,再点击 Frameworks detected: Android framework is detected in the project ConfigureConfigure 

QQ截图20180421014440

然后出现弹窗选择 ok 按钮即可,此时 AVD Manger 图标已经被点亮了。

QQ截图20180421015159

点击创建虚拟设备按钮

QQ截图20180421015902

QQ截图20180421020018

QQ截图20180421020047

点击完成按钮后,会在虚拟设备列表上显示出刚刚配置的设备;点击绿色的三角进行运行,等待时间较长。成功后如下:

QQ截图20180421021235

在终端下运行:react-native run-android,点击回车键。成功后会出现如下的窗口:

QQ截图20180421184328

在上面运行过程中,会弹出另一个窗口,项目开发中不能将此窗口关闭。

QQ截图20180421021635

成功后安卓虚拟机

QQ截图20180421184413


【7】刷新/热替换虚拟机上的内容

通过 react-native init DemoProject 对项目文件结构初始化;比如 index.js 是项目的入口文件。

App.js 文件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

(1)内容变动后,通过双击“R”键进行内容更新。

(2)按住“CTRL+M”键弹出菜单,点击“Enable Hot Reloading”进行热替换设置。

QQ截图20180421222223

标签: react native window
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码