2015
Jun
26

安裝 React-Native

目前 react-native 只能在 Mac 的機器上開發,請先買一台 Mac 吧, 這裡有官方的安裝說明 http://facebook.github.io/react-native/docs/getting-started.html

以下是開發 React-Native 的必備軟體,其中雖然官方說要安裝 Homebrew 這套只能在 Mac 運作的軟體,但實際上如果你沒用到相關功能,是不需要裝這些東西的。


  • 自行安裝 Xcode 6.3 版本以上,你可以透過 App Store 安裝 Xcode。
  • 自行安裝 Node.js 4.0.0 以上 & NPM
  • 自行安裝 Homebrew
  • 執行安裝指令 brew install watchman
  • 執行安裝指令 brew install flow
  • 執行安裝指令 npm install -g react-native-cli

最後輸入下面這個指令來建立一個新的 xcode project,成功後,你就可以打開 Xcode 找到 helloWorldApp 這個 Project ,然後執行這個 Project , React-Native 會自動打開 terminal 並建立一個 Local Server,以及會自動開啟 App 模擬器。

react-native init helloWorldApp

Require 與宣告 React-Native UI Component

React-Native 寫法很像 Nodejs ,你所寫的每一個檔案都會是一個新的 module ,你必須使用 require 的方式來載入它們,而第一個,一定要載入的 module 就是 react-native

再來你還得宣告 react-native 內建的 UI 元件, React-Native 提供的 UI 元件有很多,如 View, Text, Image, ListView 等等,如果你要使用這些元件,你必須在檔案的最上頭,宣告他們,宣告的方式很詭異,請看下面範例,我宣告了 Text (文字), Image (圖片), AlertIOS (彈跳視窗)。


Example
  1. 'use strict';
  2.  
  3. var React = require('react-native');
  4.  
  5. var {
  6. AppRegistry,
  7. StyleSheet,
  8. AlertIOS,
  9. Image,
  10. Text,
  11. TouchableHighlight,
  12. NavigatorIOS,
  13. } = React;

輸出 Hello World 文字

Example
  1. var HelloWorld = React.createClass({
  2. render: function () {
  3. return (
  4. <View>
  5. <Text>Hello World!</Text>
  6. </View>
  7. );
  8. }
  9. });

設定 UI 樣式

React-Naive 使用 CSS 的樣式設定,但是只支援部分的 CSS ,所以使用前可以先去查查 React-Native 文件,一些基本的屬性如 color, size, backgroundColor, paddingTop, marginTop, marginLeft, borderWidth, borderColor 等等都可以使用。

這裡我要設定 App 的背景色為黑色,文字為白色。

style
  1. var styles = StyleSheet.create(
  2. container: {
  3. color: "white",
  4. backgroundColor: '#000',
  5. },
  6. };
  7.  
  8. var HelloWorld = React.createClass({
  9. render: function () {
  10. return (
  11. <View style={styles.container}>
  12. <Text>Hello World!</Text>
  13. </View>
  14. );
  15. }
  16. });

使用 flexbox 排版

React-Native 已經實作了 flexbox 排版方式,我們只要設定 flexDirection = "row",就能將兩個元件以水平並排的方式呈現。

flexDirection row 範例
  1. var styles = {
  2. container: {
  3. flex: 1,
  4. flexDirection: "row",
  5. },
  6. list: {
  7. width: 40,
  8. }
  9. };
  10.  
  11. var HelloWorld = React.createClass({
  12. render: function () {
  13. return (
  14. <View style={styles.container}>
  15. <Text style={styles.list}>List1</Text>
  16. <Text style={styles.list}>List2</Text>
  17. </View>
  18. );
  19. }
  20. });

載入本機圖片

首先你要先將圖片用拖拉的方式,拉進 Xcode Images.xcassets ,拉好之後一定要將 Terminal 與 iPhone 摸擬器通通關掉,再全部重新 Compile 一次,這樣你就可以使用 Image 這個元件來載入圖片囉, 在程式碼的最開頭,記得一定要先宣告 Image 這個元件,再使用 Image 的屬性 source 載入圖片,圖片的路徑為 "image!圖檔名稱"

載入本機圖片範例
  1. var {
  2. View,
  3. Image,
  4. } = React;
  5.  
  6.  
  7.  
  8. var HelloWorld = React.createClass({
  9. render: function () {
  10. return (
  11. <View style={styles.container}>
  12. <Image source={require('image!xxx')} />
  13. </View>
  14. );
  15. }
  16. });

如何控制 render 取得的物件

React-Native 的 function render ,它可以讓你用類似 HTML 的方式來快速製作 UI,在 HTML 中我們會使用 document.getElementById('mainView') 來取得 Element,何 React-Native 也有個類似 id 的東西,它命名會 ref ,我們必須先給予 element 一個 ref 值,這樣就能透過 this.refs.xxx 來取得該 element,例如下面這個程式中,我定義一個 ScrollView 的物件,並定義 ref = "mainView"。

Example
  1. render: function () {
  2. return (
  3. <ScrollView alwaysBounceVertical="true" style={styles.container} ref="mainView">
  4. );
  5. },
  6. scrollToTop: function () {
  7. this.refs.mainView.scrollTo(0);
  8. },

如何 Scroll to top

使用 ScrollView 這個元件時,如果使用者向下滑動至底部,然後切換到下一頁,這個情況下, ScrollView 不會回復到最頂端,反而會停留在下一頁的底部,我們可以透過 refs 去取得 ScrollView ,再用內建的 Method scrollTo ,回到最頂端。


Example
  1. this.refs.mainView.scrollTo(0);

在 Device Iphone 上測試

在 Mac 中測試完 React Native 開發的程式後,下一步就是要將程式傳到 iphone 上測試,但是當我們用 xcode 將 Compile 完成的程式傳到 iphone 上,卻沒辦法直接執行,而出現錯誤訊息 「 not http://localhost:8081/index.ios.bundle 」。

解法方式如下:

打開檔案 AppDelegate.m

註解掉這一行 jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

並移除這一行前面的註解 jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

最後再用這個指令將全有的 JS 合併到 main.jsbundle,這樣就完成了,在手機 iphone 上就能夠正常的測試剛開發的 App 。

  • react-native bundle --minify

相關文件


回應 (Leave a comment)