(1)首先进入address_book目录安装node module;命令行:$ npm install (2)其次cd server,启动node数据接口服务,命令行: $ node app.js (3)初次登陆用户名:test@126.com 密码:123
(1)为了演示,代码有些粗糙; (2)服务端也不是很完善,为了方便快速搭建,使用的是基于node的文件服务。 (3)oschina会同步更新改项目:https://git.oschina.net/vczero/React-Native-App (4)相关入门教程:https://github.com/vczero/react-native-lession
React-Native的核心思想就是组件化,至关于MVC的view,所以开发应用的最佳方式就是将功能组件化。
这里咱们实现一个最简单的组件,就是邮件的末尾署名的组件。组件意味着复用,意味着统一。如今有这样一个需求,咱们须要根据不一样用户发送邮件时,生成每一个用户的名片(即邮件末尾的署名)。 一、通常一开始的实现方式以下,直接将组件内容写到功能需求的地方: <View> <View>..........这里是当前邮件组的其它功能</View> <View> <Text>框架研发部</Text> <Text>www.ctrip.com</Text> </View> </View> 二、有一天,其它的部门的同事提出他们也须要在其余的地方,增长他们的邮件署名,那么你是否又会复制一份代码呢,固然不是,咱们能够组件化: var Email = React.createClass({ render: function(){ return ( <View style={styles.container}> <Text style={styles.text}>{this.props.name}</Text> <Text style={styles.text}>{this.props.url}</Text> </View> ); } }); 三、总体的代码以下:
要实现的效果以下图:
第一步改造咱们的组件 var Article = React.createClass({ render: function(){ return ( <View style={styles.container}> <Text style={[styles.text, styles.title]}>{this.props.title}</Text> <Text style={styles.text}>{this.props.author}</Text> <Text style={styles.text}>{this.props.time}</Text> </View> ); } }); 第二步定义数据model和循环 var App = React.createClass({ getInitialState: function(){ var data = [ { title: "React-Native入门指南", author: "vczero", time: "2015-06-28" }, { title: "为何世界不同", author: "vczero", time: "2015-06-8" }, { title: "你来,我就告诉你", author: "vczero", time: "2015-04-01" } ]; return { articles: data }; }, render: function(){ return( <ScrollView> {this.state.articles.map(function(article){ return <Article title={article.title} author={article.author} time={article.time}/> })} </ScrollView> ); } }); 整个代码以下: