native教程

㈠ 如何用 React Native 創建一個iOS APP

React Native 結合了 Web 應用和 Native 應用的優勢，可以使用 JavaScript 來開發
iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象操作系統原生的 UI 組件，代替 DOM 元素來渲染等。

React Native 使你能夠使用基於 JavaScript 和 React
一致的開發體驗在本地平台上構建世界一流的應用程序體驗。React Native
把重點放在所有開發人員關心的平台的開發效率上——開發者只需學習一種語言就能輕易為任何平台高效地編寫代碼。Facebook
在多個應用程序產品中使用了 React Native，並將繼續為 React Native 投資。

其好處顯而易見：減少了人力、節省了時間、避免了 iOS 與 Android 版本發布的時間差，開發新功能可以更迅速。

下面，我們可以嘗試用React Native創建一個 iOS APP.

在我們開始之前，我建議：你可以在 Github
里先下載 React Native 的代碼框架。裡面還有一些示例項目，2048 的游戲， Movies（一個看電影的
APP）,SampleApp, TicTacToe (一款游戲)和 UIExplorer（能顯示出所有用 React Native
替代的控制項，如ListView，TabBar，MapView, Slider）），對於學慣用如何用 React Native 創建
UI,這些都是非常好的例子,尤其是 UIExplorer APP，它幾乎用到了每一個您的 APP 中需要創建的 UI 控制項。

首先，我們先來安裝相應的工具。React native 是使用 Node.js 來 創建 JavaScript 代碼。如果你已經在你電腦上安裝上了這些工具，你可以跳過下面這幾步。

推薦使用 Homebrew的方式來安裝 nvm，watchman 和 flow。

在Mac下，如果用homebrew，那麼只用一行就可以裝好:
brew install node

接下來安裝watchman
brew install watchman

watchman是Facebook的一個文件觀察者。React Native 用它來檢測代碼的變化.

接下來安裝 npm
npm install -g react-native-cli

nmp 是 node的一個三方管理工具，相當於 Ruby中的RubyGems，iOS中的 CocoaPods，Java中的 Gradle/Maven，基本上，它使您能夠輕松下載和管理你的項目需要的任何依賴庫。

在終端，找到你希望保存的項目文件，然後運行下面的文件夾。
react-native init BookSearch

以上使用 CLI 工具來構建一個 Native 項目，是准備建立並運行原樣。當這個過程完成後，你就會在終端窗口中打開 Xcode
的BookSearch.xcodeproj
並運行應用程序像往常一樣。做到這一點，模擬器將啟動您的應用程序的運行。一個終端窗口也將打開。當一個Native應用程序啟動時，它載入從以下網址
JavaScript 的應用程序。

http://localhost:8081/index.ios.bundle


終端被打開，伺服器開始作出反應來處理上述請求。該 Native 負責讀取和建設 JSX（我們將看看這個版本）和 JavaScript 代碼。

運行這個 APP,你可以看到下圖中的模擬器，如果你想在開發運行有幾個步驟，你應該這樣做。

歡迎屏幕給出了一些關鍵的指令，你應該注意：編輯應用程序的用戶界面，你應該修改，當你創建項目時生成的 index.ios.js 文件，如果您更改
JavaScript 代碼，重新載入命令應用程序 Command-R 看到的變化，如果你想要更多的選擇，使用命令控制
Command-Control-Z 打開開發者菜單，提供了這樣的選項，使現場重新載入和瀏覽器的調試。

在任何時候做本教程時你可能會遇到一個紅色屏幕模擬器，可以檢查錯誤消息。它能讓你知道這個問題是與你的代碼還是伺服器有關系。當我接收到錯誤的消
息「無法連接到伺服器」 在模擬器和檢查終端有一個「流程終止」 錯誤消息時我陷入了伺服器連接問題。當這種情況發生時，關閉終端窗口，停止在
Xcode
中的應用並再次運行它。對於其他錯誤，是由於語法錯誤代碼中或網路請求超時時（如果你的應用從互聯網上獲取數據），一個簡單的重新載入後修復這個問題應該
怎麼做。

如果你在敦促 Command-R 鍵盤但什麼都沒有發生，硬體鍵盤可能沒有連接到模擬器上。選擇模擬器上的選項菜單以連接它：Hardware > Keyboard > Connect Hardware Keyboard.

如果你按上邊程序做了它依然不能重新載入，那麼你可能需要重啟你的電腦。我遇到過一次突然死機，重啟電腦可以完成載入。

我們現在開始構建應用程序，打開 index.ios.js 文件。我建議使用適合 web 開發的 IDE。你還可以使用
Xcode，但你會發現它並不適合因為在代碼格式化、自動完成和語法錯誤突出顯示時它不是非常靈活。你可以通過學習本文來決定並選擇合適的
JavaScript IDE。我用過 RudbyMine，但實際上任何 IDE 都支持 JavaScript。如果你能得到一個支持 JSX
的那真很不錯。

當你打開 indx.ios.js 文件，你就會看到正在運行的應用程序構建 UI 的代碼。你可能看到以下代碼塊。
'use strict'

以上代碼啟用了嚴格的模式，增加了處理原生 JavaScript 代碼對錯誤的改善。
var React = require('react-native');

以上代碼可以載入 react-native 模塊，並將它賦予變數的反應。在你調用任何模塊之前你需要把外部模塊載入到你的文件中來。可以把它作為Swift 和 Objective-C 的導入庫。
var { AppRegistry, StyleSheet, Text,
View,
} = React;

上面是一個解構賦值，你可以通過它將多個對象屬性分配給一個變數。這能讓他們在文件作用域被引用。以上是可選擇的，但如果你不用它，那麼每次你使用
一個組件在你代碼中時，你就必須使用完全限定的名稱，例如：「React.AppRegistry」而不能只用「AppRegistry」
、「React.StyleSheet」 而不能用「StyleSheet」 等等。
var BookSearch = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
</Text>
</View>
);
}
});

上面創建一個類只有一個渲染 () 函數。在渲染函數中無論什麼被定義都是將輸出到屏幕上。上述使用
JSX（JavaScript語法擴展）來構建應用程序的 UI。如果您以前使用過 XML（甚至HTML），JSX
就會記住並熟悉你。它具有相同的均衡功能來打開和關閉標簽並使用屬性來設置值標簽。你不需要使用 JSX 本地反應，你可以使用純
JavaScript，但 JSX 建議它的簡單定義樹結構。如果你有很多 UI 的代碼，通過大型的 JSX 樹結構將更容易閱讀理解。
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

上面的樣式應用可於視圖的內容。如果你做過 web 開發或用過 CSS（層疊樣式表），在此之前這應該是熟悉的。React Native 使用
CSS 樣式應用程序的UI。如果你看看 JSX 代碼，你會看到不同風格的代碼被用在不同的地方。例如:
style={style.container}設置樣式定義容器的外部視圖包含其他UI組件。

上面的樣式應用可於視圖的內容。如果你做過 web 開發或用過 CSS（層疊樣式表），在此之前這應該是熟悉的。React Native 使用
CSS 樣式應用程序的 UI。如果你看看 JSX 代碼，你會看到不同風格的代碼被用在不同的地方。例如:
style={style.container}設置樣式定義容器的外部視圖包含其他 UI 組件。

㈡ 有沒有比較好的React Native教程或者React Native學習資料

010 聽晴明老師從頭講React Native網路網盤免費資源在線學習

鏈接: https://pan..com/s/1SQ9GH1vgSg2h5dDM1Nd4Pg

010 聽晴明老師從頭講React Native 課程資料 課時9 ES6基礎.mp4 課時8 Javascript基礎.mp4 課時7 開發工具選用Webstorm.mp4 課時30 Android打包發布.mp4 課時29 使用Linking調用播放視頻.mp4 課時28 懸浮層與絕對定位.mp4 課時27 本地緩存數據.mp4 課時26 針對安卓的界面調整.mp4 課時25 TabNavigator(選項卡切換).mp4 課時24 StackNavigator(頁面跳轉).mp4 課時23 刷新和分頁的補充.mp4 課時22 獲取網路數據02.mp4 課時22 獲取網路數據01.mp4