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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.