2，1步入React Native(window教程)

1，配置环境
开发工具：webstrom，Genymotion(安卓模拟器),Android Studio(负责编译)，Oracle(虚拟机)在这里苹果的开发配置就不说了。（因为需要MAC电脑）

2，可能会遇到的问题。

• Genymotion无法正常启动，需要开启Oracle(虚拟机)，之后就可以正常使用了。
• react-native run-anroid 之后无法正常使用。进入项目demo 点击进入 android =>app=>build=>outputs=>apk 找到app-debug文件，把其拖入到Genymotion中就可以了。

3，开始编程

• 创建项目打开git bash here (类似window的cmd) ，输入 react-native init demo(项目名) ，建议不要使用中文，我没有用过，你可以去尝试。
• 创建好之后点击进入demo的根目录，有git bash here 里面输入react-native run-android (这里是运行安卓系统)，当然你在运行项目的时候必须打开Genymotion。
• 开始码字，来一个我们熟悉的“Hello world!”。点击打开 index.android.js

Paste_Image.png

• index.android.js 文件详解

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
/***
 *  第一部分
 *  导入ReactNative包，导入ReactNative组件
 *  AppRegistry,//JS运行所有reactNative组件
 *  StyleSheet,//reactNative中是中的使用样式表，类似CSS的样式表
 *  Text,//开发过程中使用的组件 View///开发过程中使用的组件
 */
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
/***
 * 第二部分
 * 是ES6语法
 * 创建ReactNative组件
 * render() {}
 */
export default class demo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello world!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}
/***
 * 第三部分
 * StyleSheet.create创建样式实例
 * 在应用中只会被创建一次，不用每次在渲染周期中重新创建
 */
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,
  },
});
/***
 * 第四部分
 * 注册入口组件
 * AppRegistry:负责注册运行ReactNative应用程序的JavaScript入口
 * registerComponent:注册应用程序的入口组件。告知ReactNative哪一个组件被注册为应用的跟容器
 * ()=>demo 返回的必须是定义的组件类的名字
 */
AppRegistry.registerComponent('demo', () => demo);

本文参考于http://reactnative.cn/docs/0.42/getting-started.html