我的第一個 React-Native IOS App

安裝 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 (彈跳視窗)。

'use strict';
 
var React = require('react-native');
 
var {
  AppRegistry,
  StyleSheet,
  AlertIOS,
  Image,
  Text,
  TouchableHighlight,
  NavigatorIOS,
} = React;

輸出 Hello World 文字

var HelloWorld = React.createClass({
  render: function () {
    return (
      <View>
        <Text>Hello World!</Text>
      </View>
    );
  }
});

設定 UI 樣式

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

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

var styles = StyleSheet.create(
    container: {
        color: "white",
        backgroundColor: '#000',
    },  
};
 
var HelloWorld = React.createClass({
  render: function () {
    return (
      <View style={styles.container}>
        <Text>Hello World!</Text>
      </View>
    );
  }
});

使用 flexbox 排版

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

var styles = {
  container: {
    flex: 1,
    flexDirection: "row",
  },
  list: {
    width: 40,
  }
};
 
var HelloWorld = React.createClass({
  render: function () {
    return (
      <View style={styles.container}>
        <Text style={styles.list}>List1</Text>
        <Text style={styles.list}>List2</Text>
      </View>
    );
  }
});

載入本機圖片

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

• 官方的 Image 使用文件React-Native Image

var {   
  View, 
  Image,                                                     
} = React;
 
 
 
 
var HelloWorld = React.createClass({
  render: function () {
    return (
      <View style={styles.container}>
         <Image source={require('image!xxx')} />
      </View>
    );
  }
});

如何控制 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"。

render: function () {
  return (
    <ScrollView alwaysBounceVertical="true" style={styles.container} ref="mainView">
  );
},
scrollToTop: function () {
  this.refs.mainView.scrollTo(0);
},

如何 Scroll to top

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

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

相關文件

• 官方文件 http://facebook.github.io/react-native/