React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero)

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>
);
}
}); 整个代码如下:

 
 

React Native开发的通讯录应用的更多相关文章

  1. React Native开发技术周报2

    (1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...

  2. React Native开发入门

    目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下Reac ...

  3. React Native开发技术周报1

    (一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...

  4. DECO 一个REACT NAtive 开发IDE工具

    DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:h ...

  5. React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE

    Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮 ...

  6. React Native 开发笔记

    ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...

  7. 【转】【React Native开发】

    [React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19)  [React Native开发]React Native控件之Touchable*系列组 ...

  8. iOS程序员的React Native开发工具集

    本文整理了React Native iOS开发过程中有用的工具.服务.测试.库以及网站等. 工具 你可以选择不同的开发环境:DECO.EXPO或者你可以使用Nuclide+Atom,目前我使用EXPO ...

  9. React-Native(二):React Native开发工具vs code配置

    从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...

随机推荐

  1. 2014在辛星Javascript口译科

    ***************概要*************** 1.Javascript是一种原型化继承的基于对象的动态类型的脚本语言,它区分大写和小写.主要执行在client,用户即使响应用户的操 ...

  2. _00013 一致性哈希算法 Consistent Hashing 新的讨论,并出现相应的解决

    笔者博文:妳那伊抹微笑 博客地址:http://blog.csdn.net/u012185296 个性签名:世界上最遥远的距离不是天涯,也不是海角,而是我站在妳的面前.妳却感觉不到我的存在 技术方向: ...

  3. Directx11学习笔记【十八】 Blending混合

    本文由zhangbaochong原创,转载请注明出处http://www.cnblogs.com/zhangbaochong/p/5634580.html 在d3d11中是按frame来渲染物体的,在 ...

  4. js淡入淡出

    示例: js淡入淡出 原理:更改css不透明数值 知识点: css不透明 filter:alpha(opacity:30); opacity:0.3;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...

  5. 在投票系统方法的原则刷票(突破ip限制刷票PHP版)

    让我谈一点:事实上,没有一个突破ip限制,因为实际上,,这项限制server结束,client牛逼,不能突破..只要是能够始终重复刷票罢了 一个朋友突然来了个网站,让我帮她投票..我是一个更好的人说话 ...

  6. JS call与apply

    JS的call与apply call和apply是JS中比较重要的两个方法, 一般在框架和组件设计中用的较多,比如jQuery Code. 那么这两个方法是做什么的呢,下面我们通过代码来了解: 1 f ...

  7. crm操作观点

    using System;     using Microsoft.Xrm.Sdk;     using Microsoft.Crm.Sdk.Messages; /// <summary> ...

  8. URAL - 1966 - Cycling Roads(并检查集合 + 判刑线相交)

    意甲冠军:n 积分,m 边缘(1 ≤ m < n ≤ 200),问:是否所有的点连接(两个边相交.该 4 点连接). 主题链接:http://acm.timus.ru/problem.aspx? ...

  9. mbed列--基于飞思卡尔FRDM KL25Z鼠标设计的高速实现

    ========================================================== 原创文章转载请注明:blog.csdn.net/guo8113 ========= ...

  10. iOS多用连接、反向协议、安全

    资源 WWDC-2013-Session-708 BlackHat-US-2014-"It Just (Net)works" Understanding Multipeer Con ...