資料來(lái)源

在終端的操作：
進(jìn)入文件目錄
react-native start 

進(jìn)入文件目錄
react-native run-ios

要理解 React Native 應(yīng)用的基本結(jié)構(gòu)，
首先需要了解一些基本的React的概念，比如 JSX 語(yǔ)法、組件、state狀態(tài) 以及 props屬性 。

Hello World

根據(jù)歷史悠久的“傳統(tǒng)”，我們也來(lái)寫一個(gè)“Hello World”：

import React, { Component } from 'react';
import {
    AppRegistry,
    Text } from 'react-native';
class MyApp extends Component {
    render() {
        return (
                <Text>Hello world!</Text>
                );
    }
}

// 注意，這里用引號(hào)括起來(lái)的 'MyApp' 必須和你init創(chuàng)建的項(xiàng)目名一致
AppRegistry.registerComponent('MyApp', () => MyApp);

你可以新建一個(gè)項(xiàng)目，然后用上面的代碼覆蓋你的 index.ios.js 文件，然后運(yùn)行看看。

那這段代碼是什么意思呢？

初看這段代碼，可能覺得并不像 JavaScript —— 沒錯(cuò)，這是“未來(lái)”的 JavaScript.
首先你需要了解 ES2015 （也叫作ES6）—— 這是一套對(duì) JavaScript 的語(yǔ)法改進(jìn)的官方標(biāo)準(zhǔn)。但是這套標(biāo)準(zhǔn)目前還沒有在所有的瀏覽器上完整實(shí)現(xiàn)，所以目前而言web開發(fā)中還很少使用。React Native內(nèi)置了對(duì) ES2015 標(biāo)準(zhǔn)的支持，你可以放心使用而無(wú)需擔(dān)心兼容性問(wèn)題。上面的示例代碼中的 import、from、class、extends、以及() => 箭頭函數(shù)等新語(yǔ)法都是ES2015中的特性。如果你不熟悉ES2015的話，可以看看 阮一峰老師的書，還有論壇的這篇 總結(jié)。

示例中的這一行 <Text>Hello world!</Text>

恐怕很多人看起來(lái)也覺得陌生。這叫做JSX——是一種在JavaScript中嵌入XML結(jié)構(gòu)的語(yǔ)法。很多傳統(tǒng)的應(yīng)用框架會(huì)設(shè)計(jì)自有的模板語(yǔ)法，讓你在結(jié)構(gòu)標(biāo)記中嵌入代碼。React 反其道而行之，設(shè)計(jì)的JSX 語(yǔ)法卻是讓你在代碼中嵌入結(jié)構(gòu)標(biāo)記。初看起來(lái)，這種寫法很像web上的HTML，只不過(guò)使用的并不是web上常見的標(biāo)簽如 <div> 或是 <span> 等，這里我們使用的是React Native的組件。

上面的示例代碼中，使用的是內(nèi)置的<Text>組件，它專門用來(lái)顯示文本。組件與AppRegistry上面的代碼定義了一個(gè)名為 MyApp的新的組件（Component），并且使用了名為AppRegistry的內(nèi)置模塊進(jìn)行了“注冊(cè)”操作。你在編寫React Native應(yīng)用時(shí)，肯定會(huì)寫出很多新的組件。而一個(gè) App 的最終界面，其實(shí)也就是各式各樣的組件的組合。組件本身結(jié)構(gòu)可以非常簡(jiǎn)單 —— 唯一必須的就是在render方法中返回一些用于渲染結(jié)構(gòu)的JSX語(yǔ)句。

AppRegistry模塊

則是用來(lái)告知React Native 哪一個(gè)組件被注冊(cè)為整個(gè)應(yīng)用的根容器。你無(wú)需在此深究，因?yàn)橐话阍谡麄€(gè)應(yīng)用里 AppRegistry.registerComponent 這個(gè)方法只會(huì)調(diào)用一次。上面的代碼里已經(jīng)包含了具體的用法，你只需整個(gè)復(fù)制到index.android.js 文件中即可運(yùn)行。