React Native開發的通訊錄應用

標籤：

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)初次登入使用者名稱:[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

 為了省點篇幅，將第七篇文章也附到下面吧： 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開發的通訊錄應用