Address Book application developed by React native

React Native developed Address Book application (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. Project introduction based on React-native & Node Address Book app (1) The main functions 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) First, enter the address book directory to install node module; command line: $NPM install

(2) Next, CD server starts the node data interface service, command line: $node app.js

(3) First login user name: [email protected] password: 123

(3) Tip:

(1) For demonstration, the code is a little rough;
(2) The server is not very perfect. In order to facilitate the rapid establishment, the file service based on node is used.
(3) Oschina will update and change the project synchronously: https://git.oschina.net/vczero/react-native-app
(4) Related introductory course: https://github.com/vczero/react-native-lesson

In order to save space, the seventh article also attached to the following: React-native Guide to the seventh chapter of the manual component

The core idea of react native is componentization, which is equivalent to MVC view. Therefore, the best way to develop applications is to componentize functions.

One, the simplest way

Here we implement one of the simplest components, that is, the component signed at the end of the message. Component means reuse and unity. Now there is a demand that we need to generate each user's business card (that is, the signature at the end of the mail) according to the time when different users send mail.
1. Generally, the implementation method at the beginning is as follows: write the component content directly to the functional requirements:
<View>
< View >.... here are other functions of the current mail group < / View >
<View>
< text > framework R &amp; D department < / text >
<Text>www.ctrip.com</Text>
</View>
</View>
2. One day, colleagues from other departments suggested that they also need to add their email signature in other places. Would you like to copy another code? Of course not, we can make it component-based:
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. The overall code is as follows:

The effects to be achieved are as follows:
The first step is to transform our components
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>
);
}
};
Step 2: define data model and loop
var App = React.createClass({
getInitialState: function(){
Var data = [
{
Title: "react native Getting Started Guide",
author: "vczero",
time: "2015-06-28"
}
{
Title: "why the world is different",
author: "vczero",
time: "2015-06-8"
}
{
Title: "if 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}/>
}}
</ScrollView>
);
}
};
The whole code is as follows:

Address Book application developed by React native