标签：
1、项目初始化：
react-native init MyProject
2、启动项目：
cd MyProject
react-native start
新开cmd窗口：
react-native run-android
3、源代码分析：
附上index.android.js文件：
/* * Sample React Native App * https://github.com/facebook/react-native */ import React, { Component } from ‘react‘; import { AppRegistry, StyleSheet, Text, View } from ‘react-native‘; class MyProject extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Shake or press menu button for dev menu!This is enable hot! </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 } }); AppRegistry.registerComponent(‘MyProject‘, () => MyProject);
首先import引入react|react-native的相关组件模块，这样我们自定义组件的时候可以直接返回react自身的元素（react组件自定义时，必须实现render方法，并且返回一个react element，而且有且仅有一个被包含的顶层元素）
然后通过extends继承Component组件，实现render方法，返回一个包含View布局，内嵌三个Text控件的react element，至于Text组件的style定义，同react中一致，可以是一个有效的以大括号括起来的js表达式或对象，如styles，最后通过
AppRegistry.registerComponent将组件注册暴露使用。。。
4、真机运行时，可以摇晃手机，在弹出的工具框中选择Reload Js，进行js代码的重新安装，可以直接看到修改后的运行效果，也可以直接单击选中“支持热更新”，从而实现ide中更新后，app端自动更新效果。。。
标签：
原文地址：http://www.cnblogs.com/caiya928/p/5499128.html
