在終端的操作:
進(jìn)入文件目錄
react-native start
進(jìn)入文件目錄
react-native run-ios
要理解 React Native 應(yīng)用的基本結(jié)構(gòu)弄诲,
首先需要了解一些基本的React的概念,比如 JSX 語法、組件驱还、state狀態(tài)
以及 props屬性
阴挣。
Hello World
根據(jù)歷史悠久的“傳統(tǒng)”颠放,我們也來寫一個“Hello World”:
import React, { Component } from 'react';
import {
AppRegistry,
Text } from 'react-native';
class MyApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
// 注意伪朽,這里用引號括起來的 'MyApp' 必須和你init創(chuàng)建的項目名一致
AppRegistry.registerComponent('MyApp', () => MyApp);
你可以新建一個項目帮毁,然后用上面的代碼覆蓋你的 index.ios.js 文件,然后運行看看吉拳。
那這段代碼是什么意思呢质帅?
初看這段代碼,可能覺得并不像 JavaScript —— 沒錯合武,這是“未來”的 JavaScript.
首先你需要了解 ES2015 (也叫作ES6)—— 這是一套對 JavaScript 的語法改進(jìn)的官方標(biāo)準(zhǔn)临梗。但是這套標(biāo)準(zhǔn)目前還沒有在所有的瀏覽器上完整實現(xiàn)涡扼,所以目前而言web開發(fā)中還很少使用稼跳。React Native內(nèi)置了對 ES2015 標(biāo)準(zhǔn)的支持,你可以放心使用而無需擔(dān)心兼容性問題吃沪。上面的示例代碼中的 import汤善、from、class票彪、extends红淡、以及() => 箭頭函數(shù)等新語法都是ES2015中的特性。如果你不熟悉ES2015的話降铸,可以看看 阮一峰老師的書在旱,還有論壇的這篇 總結(jié)。
示例中的這一行 <Text>Hello world!</Text>
恐怕很多人看起來也覺得陌生推掸。這叫做JSX——是一種在JavaScript中嵌入XML結(jié)構(gòu)的語法桶蝎。很多傳統(tǒng)的應(yīng)用框架會設(shè)計自有的模板語法,讓你在結(jié)構(gòu)標(biāo)記中嵌入代碼谅畅。React 反其道而行之登渣,設(shè)計的JSX 語法卻是讓你在代碼中嵌入結(jié)構(gòu)標(biāo)記。初看起來毡泻,這種寫法很像web上的HTML胜茧,只不過使用的并不是web上常見的標(biāo)簽如 <div> 或是 <span> 等,這里我們使用的是React Native的組件仇味。
上面的示例代碼中呻顽,使用的是內(nèi)置的<Text>組件雹顺,它專門用來顯示文本。組件與AppRegistry上面的代碼定義了一個名為 MyApp的新的組件(Component)廊遍,并且使用了名為AppRegistry的內(nèi)置模塊進(jìn)行了“注冊”操作无拗。你在編寫React Native應(yīng)用時,肯定會寫出很多新的組件昧碉。而一個 App 的最終界面英染,其實也就是各式各樣的組件的組合。組件本身結(jié)構(gòu)可以非常簡單 —— 唯一必須的就是在render方法中返回一些用于渲染結(jié)構(gòu)的JSX語句被饿。
AppRegistry模塊
則是用來告知React Native 哪一個組件被注冊為整個應(yīng)用的根容器四康。你無需在此深究,因為一般在整個應(yīng)用里 AppRegistry.registerComponent 這個方法只會調(diào)用一次狭握。上面的代碼里已經(jīng)包含了具體的用法闪金,你只需整個復(fù)制到index.android.js 文件中即可運行。