0. Preface: Project Address :https://github.com/vczero/React-Native-App
Welcome to issues to discuss any issues, including "fitting room" ....
I. Introduction of the ProjectThe main features of the React-native & Node Address Book app (1) are:
- File system-based node. JS service side;
- Address Book features (category page + List page + Dial-up mailbox mail)
- Announcement features (List page + Detail page)
- Contacts and Content management features
- WebView the inline instance effect as shown:
(2) Install the startup program
(1)首先进入address_book目录安装node module;命令行:$ npm install (2)其次cd server,启动node数据接口服务,命令行: $ node app.js(3)初次登录用户名:[email protected] 密码:123
(3) Tip:
(1)为了演示,代码有些粗糙; (2)服务端也不是很完善,为了方便快速搭建,使用的是基于node的文件服务。(3)oschina会同步更新改项目:https://git.oschina.net/vczero/React-Native-App(4)相关入门教程:https://github.com/vczero/react-native-lession
in order to save some space, the seventh article also attached to the following:react-native Getting Started GuideSeventh Writing component
React-Native的核心思想就是组件化,相当于MVC的view,因此开发应用的最佳方式就是将功能组件化。
One, the simplest way
这里我们实现一个最简单的组件,就是邮件的末尾署名的组件。组件意味着复用,意味着统一。现在有这样一个需求,我们需要根据不同用户发送邮件时,生成每个用户的名片(即邮件末尾的署名)。1、一般一开始的实现方式如下,直接将组件内容写到功能需求的地方:<View> <View>..........这里是当前邮件组的其它功能</View> <View> <Text>框架研发部</Text> <Text>www.ctrip.com</Text> </View></View>2、有一天,其它的部门的同事提出他们也需要在其他的地方,增加他们的邮件署名,那么你是否又会复制一份代码呢,当然不是,我们可以组件化: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> ); }});3、整体的代码如下:
Second, loop a list of articles
要实现的效果如:
The first step is to retrofit our component var Article = React.createclass ({render:function () {return (<view Style={styles.conta Iner}> <text Style={[styles.text, styles.title]}>{this.props.title}</text> &L T Text style={styles.text}>{this.props.author}</text> <text Style={styles.text}>{this.props.ti Me}</text> </View>); }}); The second step defines the data model and the cyclic var App = React.createclass ({getinitialstate:function () {var data = [{t Itle: "React-native Getting Started Guide", Author: "Vczero", Time: "2015-06-28"}, {title: "Why the world is different", Author: "Vczero", Time: "2015-06-8"}, {title: "You Come, I will tell you", 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}/>})} &L t;/scrollview>); }}); The entire code is as follows:
React native development of Address book apps (using JavaScript to develop native iOS apps, Vczero)