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

相关文件

网页好读版