Address Book application developed by React native

Source: Internet
Author: User
Tags install node


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


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.