React实战-如何快速构建一个ReactNative的Demo
ReactJs宣称的是一次学习就够了，意思是学习了ReactJs后，在Web端和移动端就都一样处理了。事实是否真的是这样呢？在实际的应用过程中会发现，现实并非如口号叫的那么好听，但也并非完全从头学起，但是在学会了ReactJs后，开始编写ReactNative的过程中，由于对原理了解并不深刻，会遇到各种坑。如果不扫清这些坑，会让你在第一个demo正常展示前耗费你大量的时间，让你感到沮丧。
还是以android环境为例从安装开始，到实现第一个最基本的数据集展示和数据集操作的demo吧。
1.环境配置
一般来说，我们安装ReactNative官网中的步骤，依次执行就能正常配置。
安装node,python2,react-native-cli，再安装Android Studio.
创建一个PersonListDemo程序：react-native init PersonListDemo
再执行 react-native run-android。
坑：以上是官网的步骤。但是如果只是这样就会发现会出错：app:installDebug的错误。如果以前没做过移动端的人会感觉莫名其妙，其实这个错误是应用安装调试失败。我们调试、测试的方法很多，主要包括：模拟器、真机。模拟器的安装可以包含在Android Studio中。如果在模拟器上调试的话，应先启动模拟器。最简单的方法是记住两条命令：
l显示当前模拟器 emulator -list-avds;
l启动模拟器 emulator -avd Nexus_6。
启动模拟器后，基本上能无障碍出现HelloWorld的demo了。
2.建立自己的demo
出现HelloWorld后会让我们欣喜，然后就开始动手构建自己的demo。
等你开始后会发现ReactNative中的component与React中相去甚远，相同的只是思想和方法。我们暂且抛开ios和andriod的区别，还是专注于ReactNative。ReactNative中的基础component中有View,Text,Flexbox,ListView,Navigator等，这些跟ReactJs中用法类似，部分名字也类似。但是还是需要重新了解。
最常犯的错：
lComponent 没有export
lComponent中return的不是一个元素对象。
lStyle中color并没有Web中的设置，如：’white’等。
数据显示的方式和ReactJs中一样，只是采用的控件不同而已：
{
PersonList.map(person => {
return person.sex === 'F' ?
{ person.name } ： { person.name }
} )
}
Navigator的使用：在ReactJs中我们采用的是Rutor，在React-native中基础控件式Navigator。用于页面跳转，下面是一个简化的Navigator写法。
class MyNavigator extends Component{
onForword(route,navigator){
navigator.push({index: route.index+1});
}
onBack(route,navigator){
navigator.pop();
}
render(){
return (
initialRoute={{index: 0 }}
renderScene={(route, navigator) => {
switch(route.index){
case 0:
return this.onForword(route,navigator)} />;
case 1:
return this.onBack(route,navigator)}
onForword={()=>this.onForword(route,navigator)} />;
case 2:
return this.onBack(route,navigator)}/>;
default:
return ;
}
}
}/>
);
}
}
等你看完了这些，是否又有些想骂娘了，说好的学一次呢，又要重新学了。至于数据操作方式和ReactJs中并无差别了。
