React native development of Address book apps (using JavaScript to develop native iOS apps, Vczero)

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)