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中一样，只是采用的控件不同而已：

<ScrollView style={style.personlist}>

     {

      PersonList.map(person => {

      return person.sex === 'F' ?

      <Text  style={{color: 'red'}}> { person.name } </Text> ： <Text  style={{color: 'blue'}}> { person.name }

      } )

     }

     </ScrollView>

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 />;

       }         

      }

  }/>

   );

}

}

等你看完了这些，是否又有些想骂娘了，说好的学一次呢，又要重新学了。至于数据操作方式和ReactJs中并非无差别了。