簡(jiǎn)介

React Native宣稱了一種全新的原生iOS和安卓應(yīng)用的開(kāi)發(fā)方式，只使用一個(gè)基于React框架的代碼。其思路是使用JavaScript寫應(yīng)用，React Native將編譯本地的iOS和安卓應(yīng)用。

環(huán)境配置

首先要做的事情就是搭建環(huán)境。

上面鏈接提供了針對(duì)Mac，?Windows 和 Linux用戶的操作指南，以及準(zhǔn)備Android 和 iOS 開(kāi)發(fā)環(huán)境的說(shuō)明。

一旦完成了React Native的安裝，我們就能開(kāi)始創(chuàng)建我們的項(xiàng)目了：

$ react-native init HelloWorld

我們初始化了一個(gè)HelloWorld的項(xiàng)目，里面包含App.js、android、app.json、index.js、ios、node_modules、package.json、 yarn.lock8個(gè)文件，以下簡(jiǎn)要說(shuō)明：

1、React Native使用npm管理package，因此有node_modules目錄

2、android?和ios目錄包含了典型的Android/iOS 項(xiàng)目，可以分別使用Android Studio/Xcode打開(kāi)或者運(yùn)行。

3、index.js 文件包含了React Native源碼的主入口

4、App.js 顯示的第一個(gè)主頁(yè)面

5、package.json跟 Node 工程類似，用于描述項(xiàng)目的基本信息以及需要的依賴信息，比如默認(rèn)依賴 React 和 React Native。RN 也是通過(guò) Node.js 的 npm 做依賴管理

進(jìn)入到當(dāng)前HelloWorld目錄，選擇一個(gè)平臺(tái)運(yùn)行

For?Android react-native?run-android

For?iOS react-native?run-ios

你會(huì)發(fā)現(xiàn)此時(shí)打開(kāi)了一個(gè)運(yùn)行React Native packager的命令行窗口。你不用管它，讓它在后臺(tái)運(yùn)行就是了，它將處理打包以及我們寫代碼時(shí)的實(shí)時(shí)加載。

如果一切配置都是正確的，你應(yīng)該可以看到下面的東西：

先來(lái)個(gè)感性的認(rèn)識(shí)，修改一 些文本，用文本編輯器打開(kāi)index.ios.js文件。?

（1）找到代碼部分： Welcome to React Native! 修改成如下： React-Native入門學(xué)習(xí)?

（2）找到代碼 welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, 修改成如下： welcome: { fontSize: 30, textAlign: 'center', margin: 10, color: 'red', }

? (3)? 點(diǎn)擊模擬器，cmd?+ R,刷新視圖,會(huì)看到如下截圖：

Hello, React

現(xiàn)在我們已經(jīng)把第一個(gè)RN項(xiàng)目建好，并成功運(yùn)行了。我們現(xiàn)在打開(kāi)RN的入口文件index.js和主頁(yè)面App.js文件

注意，這里用引號(hào)括起來(lái)的'HelloWorld'必須和你init創(chuàng)建的項(xiàng)目名一致

React Native使用的是ES6的語(yǔ)法，上面兩個(gè)文件基本都是從react包中導(dǎo)入?React?和?Component ，從react-native包中導(dǎo)入 View、Text?和?AppRegistry，import App from './App'表示從當(dāng)前目錄引入App文件。

AppRegistry.registerComponent('HelloWorld', () => App);使用前面導(dǎo)入的AppRegistry注冊(cè)HelloWorld，這樣做的原因是前面react-native為我們初始化的Android 和 iOS?本地代碼在啟動(dòng)的時(shí)候需要找到標(biāo)志為HelloWorld的根空間。本地代碼使用注冊(cè)的控件去初始化application，之后絕大部分時(shí)間都是在和React Native代碼工作，不再需要注冊(cè)任何的控件。

相對(duì)于web開(kāi)發(fā)，我們需要提供視圖的樣式，那么StyleSheet就是干這件事的，只是用JS的自面量表達(dá)了css樣式。?如何引入css樣式？其實(shí)在App.js文件里，render方法返回的視圖模板里已經(jīng)體現(xiàn)出來(lái)了，即style={styles.container}.其中style是視圖的一個(gè)屬性，styles是我們定義的樣式表，container是樣式表中的一個(gè)樣式。

導(dǎo)入了這些東西之后，我們就可以定義我們的控件（component）了。一個(gè)component本質(zhì)上是一個(gè)view，可以包含子view和子控件。簡(jiǎn)化下App.js的代碼，按如下方法可以自定義我們的根控件為：

示例中的語(yǔ)法恐怕很多人看起來(lái)也覺(jué)得陌生。這叫做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上常見(jiàn)的標(biāo)簽如

或是等，這里我們使用的是React Native的組件。上面的示例代碼中，使用的是內(nèi)置的組件，它專門用來(lái)顯示文本。

一般我們?cè)诙x了一個(gè)組件之后，為了復(fù)用，需要將它導(dǎo)出以提供給其他頁(yè)面使用。組件導(dǎo)出的關(guān)鍵字就是上面圖片的exprot default。關(guān)于export default 需要注意以下幾點(diǎn)：

1、有default在引用時(shí)可以自定義名稱，而沒(méi)有default時(shí)需要使用{}括起來(lái)且名稱必修和class名稱一致

2、每個(gè)文件里只能有一個(gè)default組件，但可以有多個(gè)非default組件

render方法就是渲染視圖用的。return返回的是視圖的模板代碼。return里面就是JSX的模板語(yǔ)法。