我的第一个 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/