写在前边的话：
在上一个博客详细明确的介绍了React Native的环境的安装过程和一些会遇到的问题。
环境搭建好后，下一部就是使用它，在使用之前，我们应该学习关于RN的一些知识，学习一门语言或者是知识，学习的过程中最主要的一个环节就是要了解他，认识它，这篇文章将会引导你走进React Native 的殿堂。
一.创建项目
创建一个项目是十分简单的，不过是一行代码，一句命令的事情。主要是认识创建它的意义，认识并且很熟悉创建的内容是什么。先了解RN项目的目录结构和入口文件，在看一下package.json 和node_modules在项目中的作用。
1.使用React Native命令行工具来创建新项目：
2.初始的目录结构
3.入口文件内容
二.页面怎么写
但我们知道了项目的是由哪里开始的，接下来的关键就是怎么写好页面，怎么渲染页面，当我们看到代码的改动直接映射到界面的变动时，能够更直观的学习RN的使用，下边将会详细的讲解页面，这样就很快地清除疑惑。现在我们先清空APP.js文件里的东西，然后在慢慢的自己编辑。
1.引入基本库和组件
import React,{Component} from 'react';
import {View,Text} from 'react-native';2.在RN中，页面是由‘组件’搭建成的。我们先写一个简单地页面。
export default class Page extends Compont{
render(){
return(
<View>
<Text>hello RN！</Text>
</View>
);
}
}
代码解释：
2.1 这段代码，我们首先声明了一个类，它继承于Component，也就是他是一个组件。
2.2 组件中有个render()方法，我们的UI内容，都是通过这个render函数渲染的。
2.3 在render中我们有个View，一个Text。这都相当于HTML中标签一样，可以通过RN的官网认识更多。
2.4 运行项目，便可得到咱们写的代码了。
3.样式
3.1 RN中采用的和CSS基本相同的命名，使用激素js来写样式。
首先引入样式的apiimport {..,StyleSheet} from 'react-native';
实现方法：
const PageStyle = StyleSheet.create({
viewStyle: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'black'
},
textStyle: {
color: 'white',
fontSize: 20
}
});
给组件添加样式：
export default class Page extends Component {
render() {
return (
<View style={PageStyle.viewStyle}>
<Text style={PageStyle.textStyle}>hello RN！</Text>
</View>
);
}
}
3.2 这里我们使用flex布局，简单的改动，不用坐标定位，也不用刻意指定约束。
将Text的内容居中展示，改变View背景颜色，Text颜色及字体大小。
4.数据源
在项目的开发中，页面最主要的最麻烦的动能就是数据的展示。比如我们要展示用户的基本信息，姓名，年龄。
那我们该怎么做呢？
在Page类的构造函数中声明两个字段：
...
constructor(props){
super(props);
this.name='李浩';
this.age=100;
}
...
然后在组件中使用这两个数据：
render() {
return (
<View style={PageStyle.viewStyle}>
<Text style={PageStyle.textStyle}>姓名：{this.name}</Text>
<Text style={PageStyle.textStyle}>年龄：{this.age}</Text>
</View>
);
}5.交互
页面最重要的最麻烦的功能之二，有了数据的展示，就要处理用户与项目的交互。RN中有丰富的手势和组件来实现与用户的交互。比如为年龄的Text增加点击事件，点击后，年龄+1.
render(){
retrun(
<View style={PageStyle.viewStyle}>
<Text style={PageStyle.textStyle}>姓名：{this.name} </Text>
<Text
style={PageStyle.textStyle}
onPress={
()=>{
this.age +=1;
console.log(this.age,'点击后的age');
}
}
>年龄：{this.age}</Text>
</View>
);
}三.state
上面我们发现字段的值改变了，但是并没有体现在UI上，。
在RN中，页面中最直接的数据源，可以影响UI的，是一个叫state的字段。
1.首先我们把姓名和年龄放在state中
...
//构造函数
constructor(props){
super(props);
this.state = {
name:'李浩',
age:100
};
}
...2.然后在组件中使用
render() {
return (
<View style={PageStyle.viewStyle}>
<Text style={PageStyle.textStyle}>姓名：{this.state.name}</Text>
<Text style={PageStyle.textStyle}>年龄：{this.state.age}</Text>
</View>
);
}3.点击事件中更新年龄，更新state
...
<Text
style={PageStyle.textStyle}
onPress={ () => {
this.setState({
age: this.state.age += 1
});
}}
>年龄：{this.state.age}</Text>
...4.state的使用
组件中使用state来展示UI的，都会根据state的刷新而及时的重新进行渲染。
state的使用注意不能通过this.stat.name = xx进行更新，而需要使用setState()的方法进行更新。
四.props
页面最麻烦也是最主要的功能三，传值。
每个组件都可以接受任意的输入值，称为props，也可以理解为，props 是传值的一个手段。
1.我们将刚刚的信息展示拆成一个组件。
function InfoComponent(props) {
return (
<View>
<Text style={PageStyle.textStyle}>姓名：{props.name}</Text>
<Text style={PageStyle.textStyle}>年龄：{props.age}</Text>
</View>
);
}2.然后修改Page类的render布局
render() {
return (
<View style={PageStyle.viewStyle}>
<InfoComponent
name={this.state.name}
age={this.state.age}
/>
</View>
);
}3.props的使用
在这里我们现实封装了一个组件函数InfoComponent(props)，它接受一个props参数，然后返回了一个组件，在组件中使用了props中的字段。
而Page类中，我们使用InfoComponent组件，并将state中的name和age传给了它。
这就是组件中props的传递和接受，可以实现组件中的数据传递。
4.state和props
props和state，都可以影响UI，当props变化了，使用props的组件也会及时渲染。
五.页面跳转于页面传值
会写页面了，但是项目并不是一个页面构成的，而多个页面的跳转和传值，是学习新的框架初期很关注的。
RN有多个导航可以选择，有原生框架的，有RN实现的。
选择一个导航，查看他的文档。