频道栏目
首页 > 资讯 > HTML/CSS > 正文

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

16-09-22        来源:[db:作者]  
收藏   我要投稿

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中并无差别了。

相关TAG标签
上一篇:台积电:绝大多数7nm客户都会转向6nm_IT新闻_博客园
下一篇:最后一页
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站