0、前言: 项目地址:https://github.com/vczero/React-Native-App 欢迎大家提issues讨论任何问题,包括“试衣间”....一、项目介绍基于React-Native & Node通讯录A ...
0、前言:
项目地址:https://github.com/vczero/React-Native-App
欢迎大家提issues讨论任何问题,包括“试衣间”....
一、项目介绍
基于React-Native & Node通讯录App
(1)主要完成的功能有:
- 基于文件系统的Node.js服务端;
- 通讯录功能(分类页 + 列表页 + 拨号邮箱邮件)
- 公告功能(列表页 + 详情页)
- 通讯录和内容管理功能
- webview内嵌实例 效果如下图所示:
(2)安装启动程序
(1)首先进入address_book目录安装node module;命令行:$ npm install (2)其次cd server,启动node数据接口服务,命令行: $ node app.js(3)初次登录用户名:test@126.com 密码:123
(3)Tip:
(1)为了演示,代码有些粗糙; (2)服务端也不是很完善,为了方便快速搭建,使用的是基于node的文件服务。(3)oschina会同步更新改项目:https://git.oschina.net/vczero/React-Native-App(4)相关入门教程:https://github.com/vczero/react-native-lession
为了省点篇幅,将第七篇文章也附到下面吧:
React-Native入门指南
第七篇动手写组件
React-Native的核心思想就是组件化,相当于MVC的view,因此开发应用的最佳方式就是将功能组件化。
一、最简单的方式
这里我们实现一个最简单的组件,就是邮件的末尾署名的组件。组件意味着复用,意味着统一。现在有这样一个需求,我们需要根据不同用户发送邮件时,生成每个用户的名片(即邮件末尾的署名)。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、整体的代码如下:
二、循环一个文章列表
要实现的效果如下图:
第一步改造我们的组件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> ); }});整个代码如下:
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero)
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。