React实战-如何快速构建一个ReactNative的Demo-蒲公英云

React实战-如何快速构建一个ReactNative的Demo

ReactJs宣称的是一次学习就够了，意思是学习了ReactJs后，在Web端和移动端就都一样处理了。事实是否真的是这样呢？在实际的应用过程中会发现，现实并非如口号叫的那么好听，但也并非完全从头学起，但是在学会了ReactJs后，开始编写ReactNative的过程中，由于对原理了解并不深刻，会遇到各种坑。如果不扫清这些坑，会让你在第一个demo正常展示前耗费你大量的时间，让你感到沮丧（weixin:react实战）。

还是以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中用法类似，部分名字也类似。但是还是需要重新了解。

最常犯的错：

l Component 没有export

l Component中return的不是一个元素对象。

l Style中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 (

<Navigator
  initialRoute=\{ \{index: 0 \}\}
  renderScene=\{(route, navigator) => \{
   switch(route.index)\{
   case 0:
   return <Login onForword=\{()=>this.onForword(route,navigator)\} />;
   case 1:
   return <Dashborder onBack=\{()=>this.onBack(route,navigator)\}
   onForword=\{()=>this.onForword(route,navigator)\} />;
   case 2:
   return <AddPerson onBack=\{()=>this.onBack(route,navigator)\}/>;
   default:
   return <Login />;
   \}         
  \}