在上一篇文章中，我们学会了如何搭建React Native的环境（React Native入门教程(笔记) 1 – 开发环境搭建），不知道你们是否搭建好了呢，如果还没有，那么快动起小手，来体验RN带给我们的乐趣。
欢迎加入React Native讨论群：120663591
由于我也没怎么接触过js和css，所以就用自己的方式来学习，所以文章中有错误在所难免，如果您发现了错误，请及时在文章底下评论。我个人比较合适的学习方式是直接开发，遇到什么不会就去查，先把大概怎么写混熟，等到可以熟练写出程序之后，再去重新跟着基础查漏补缺。 这样做的原因是，对于初学者，直接给出许多属性，是记不住的，系统的学下来之后，如果没有大量联系，最终只有忘记，所以给自己一个编程的环境，告诉自己在开发，而不是单纯的学，这样也算是个捷径吧。
转载请注明出处：http://blog.csdn.net/wingichoy/article/details/51810882
电影介绍界面
本次教程的项目使用的是facebook的官方例子来学习，是一个电影上映的界面，通过这个例子，你可以学习到基本组件的使用，以及样式的改写。官方文档链接
首先，打开我们init好的项目，可以看到有index.android.js和index.ios.js两个js文件，分别对应android的界面和ios的界面：
打开index.android.js，对其中初始化代码进行分析。
可以看到初始化代码基本分四个部分：
1.导入部分
2.视图部分
3.样式部分
4.注册部分
1.导入部分
//导入React
import React, { Component } from 'react';
//导入各个组件
import {
AppRegistry, //注册器
StyleSheet, //style
Text, //Text 相当于android的TextView
TextInput, //输入框 相当于android的EditText
View, //基本的视图容器
Image, //图片组件 相当于android的ImageView
} from 'react-native';此部分是将需要用的到组件导入，分别类似于：
#include "stdio.h" //c语言
import com.wing.* //java语言2.视图部分
class My extends Component {
render() {
return (
//设置一个跟容器
<View style={styles.container}>
//设置3个文本组件，样式分别引用各自的style
<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
</Text>
</View>
);
}
}
在这一部分，类似于Android的Activity，也就是一个程序的界面。对比Android来说呢，好比是Activity动态添加的View，也就是说视图的样式是默认的。他的样式由 styles(相当于Android的xml布局文件)决定。以上代码的意思就是说在主容器内添加了两个Text控件和一个Image控件，他们的样式分别由各自的style决定。
3.样式部分
//定义一个StyleSheet常量
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,
},
});
此部分为各个组件的样式定义，语法上跟CSS大同小异，由于我也不太熟悉CSS的属性，所以用到的时候去查，多写几遍应该就记住了，孰能生巧嘛。
在此部分，相当于Android里面的xml文件，fontSize对应android:textSize。相信你很轻易就可以看明白。
4.注册部分
AppRegistry.registerComponent('WingProject', () => WingProject);
每个应用必须进行注册以后才可以渲染视图，每个APP只需要渲染一次即可。
开始制作第一款App，电影介绍
由于电影介绍，需要有电影的名称，年份，海报等。 所以我们现在本地模拟一个数据：
var MOVIES_DATA=[
{
title: 'Warcraft',
year: '2016',
img: 'http: //b.hiphotos.baidu.com/baike/pic/item/b03533fa828ba61ed1b6ccc84634970a314e59f8.jpg'
}
];由于在程序里使用到了Image等组件，所以需要进行导入
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Image,
} from 'react-native';
之后就可以编写界面，在容器里加入我们的组件。
class WingProject extends Component {
render() {
//获取模拟的电影数据
var movie = MOVIES_DATA[0];
return (
//添加主容器 并设置style
<View style={styles.container}>
//添加各个组件，并设置style
<Text style = {styles.title}>{movie.title}</Text>
<Text style = {styles.title}>{movie.year}</Text>
<Image source={{uri:movie.img}}
style = {styles.image}
/>
</View>
);
}
}完成之后，接下来定义style
const styles = StyleSheet.create({
//设置主容器的布局
container: {
flex:1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
//image必须设置大小，不然图片就不会显示
image:{
width:400,
height:600,
},
//设置字体大小为20
title:{
fontSize:20,
}
});在程序的最后，对应用进行注册操作：
AppRegistry.registerComponent('WingProject', () => WingProject);
运行APP
编码已经完成，在cmder里键入 run-android命令运行以下试试吧！
可以看到APP已经运行了 界面如下：
哈哈 有木有很开熏~~~