上一篇寫了 React Native 的環(huán)境搭建，這一篇開始真正的代碼編寫。
Hello world
新建一個 React Native 項目，打開 index.ios.js 或者 index.android.js 文件，修改主界面布局的代碼。例如：
import React, { Component } from 'react';
import {
AppRegistry,
Text
} from 'react-native'
export default class HelloWorld extends Component {
render() {
return (
<View>
<Text>Hello world!</Text>
</View>
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
上面這段代碼是一個最簡單的 Hello World React Native App。前兩句 import 語句是從 React 庫中引入需要的模塊。
之后，定義了一個組件（Component），名字叫 HelloWorld。我們在開發(fā) React Native App 時，會創(chuàng)建很多組件。創(chuàng)建一個組件非常簡單，唯一必要的就是通過 render() 方法返回一段 JSX 內(nèi)容。
最后一句代碼，AppRegistry 告訴 React Native 哪個組件是整個應(yīng)用的根組件。不必糾結(jié)于理解最后一句代碼，每個 React Native App 只會執(zhí)行一次該操作。
組件的屬性（props）
大部分組件可以通過不同的屬性進行自定義，這些屬性在 React Native 中被稱為 props。
比如，我們要創(chuàng)建一個 Image 組件來顯示一張圖片，就可以在創(chuàng)建時通過設(shè)置 Image 組件的 source 屬性來決定要展示的圖片。
代碼如下：
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
export default class HelloWorld extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
在自定義的組建中使用 props
屬性不僅可以運用在內(nèi)置的組件當中，也可以運用在自定義的組建當中，以便我們靈活地創(chuàng)建組件。
在 React Native 中創(chuàng)建組件的方法很簡單，就是創(chuàng)建一個繼承于 Component 的類，并實現(xiàn) render() 方法，返回一段 JSX 代碼。
例如，我們可以這樣創(chuàng)建一個 Greeting 組件來顯示一句 Hello Foo 字符串，其中，F(xiàn)oo 可以自定義。
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
其中，this.props.name 用來讀取當前組件的 name 屬性的值。
自定義組件的使用也很簡單，在根組件的 render() 方法返回的 JSX 中直接食用即可：
export default class HelloWorld extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='React Native' />
</View>
);
}
}
這樣就會顯示一句 Hello React Native。
組件的狀態(tài)（state）
在 React Native 中，除了 props 以外還有一種控制組件的方式，那就是 state。props 的值在組件的整個生命周期內(nèi)是不變的，當我們需要在組件上設(shè)置一些可變的數(shù)據(jù)是，就需要使用 state。
比如，我們要創(chuàng)建一個閃爍字符串的組件，組件可以接受一個 text 屬性代表要顯示的文字。在組件中，我們需要定義一個名為 showText 的 boolean 類型的 state，并且每一秒鐘改變一次值，用來顯示和隱藏要展示的問題，達到閃爍的效果。
代碼如下：
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Toggle the state every second
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
在創(chuàng)建組件的時候，我們給 showText 設(shè)置了一個默認值 true，然后啟動定時任務(wù)，每一秒鐘執(zhí)行一次，將 showText 的值設(shè)置為與當前相反的值。
在根組件的 render() 方法中使用這個組件，并設(shè)置 text 屬性，就可以創(chuàng)建一個帶閃爍效果的文字。
在真實場景中，往往不會通過定時器來改變組件的狀態(tài)，而是根據(jù)特定場景，在從服務(wù)器獲取到新的數(shù)據(jù)或者有新的用戶操作時改變組件的狀態(tài)。
