React Native 看起來很像 React，只不過其基礎(chǔ)組件是原生組件而非 web 組件。要理解 React Native 應(yīng)用的基本結(jié)構(gòu)，首先需要了解一些基本的 React 的概念，比如 JSX 語(yǔ)法、組件、state狀態(tài)以及props屬性。如果你已經(jīng)了解了 React，那么還需要掌握一些 React Native 特有的知識(shí)，比如原生組件的使用。這篇教程可以供任何基礎(chǔ)的讀者學(xué)習(xí)，不管你是否有 React 方面的經(jīng)驗(yàn)。
讓我們開始吧！
Hello World
根據(jù)歷史悠久的“傳統(tǒng)”，我們也來寫一個(gè)“Hello, world!”：
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
? render() {
? ? return (
? ? ? ? <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
? ? ? ? ? <Text>Hello, world!</Text>
? ? ? ? </View>
? ? );
? }
}
那這段代碼是什么意思呢？
初看這段代碼，可能覺得并不像 JavaScript——沒錯(cuò)，這是“未來”的 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)的支持，你可以放心使用而無需擔(dān)心兼容性問題。上面的示例代碼中的import、from、class、extends、以及() =>箭頭函數(shù)等新語(yǔ)法都是 ES2015 中的特性。如果你不熟悉 ES2015 的話，可以看看阮一峰老師的書，還有論壇的這篇總結(jié)。
示例中的這一行<View><Text>Hello world!</Text></View>恐怕很多人看起來也覺得陌生。這叫做 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)記。初看起來，這種寫法很像 web 上的 HTML，只不過使用的并不是 web 上常見的標(biāo)簽如<div>或是<span>等，這里我們使用的是 React Native 的組件。上面的示例代碼中，使用的是內(nèi)置的<Text>組件，它專門用來顯示文本，而<View>就類似 html 中的div或是span這樣的容器。
組件
上面的代碼定義了一個(gè)名為HelloWorldApp的新的組件（Component）。你在編寫 React Native 應(yīng)用時(shí)，肯定會(huì)寫出很多新的組件。而一個(gè) App 的最終界面，其實(shí)也就是各式各樣的組件的組合。組件本身結(jié)構(gòu)可以非常簡(jiǎn)單——唯一必須的就是在render方法中返回一些用于渲染結(jié)構(gòu)的 JSX 語(yǔ)句。
