React Native for Android初探

非死book 在 React.js Conf 2015 大會上推出了基于 JavaScript 的開源框架 React Native 。React Native 結合了 Web 應用和 Native 應用的優勢，可以使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象操作系統原生的 UI 組件，代替 DOM 元素來渲染等。

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

對于不太了解React Native是什么以及非死book為什么要創建React Native，可以先看看 這篇博客 。

非死book 于 2015 年 9 月 15 日發布了 React Native for Android， 把 Web 和原生平臺的 JavaScript 開發技術擴展到了 Google 的流行移動平臺–Android。

最近項目技術負責人說可能以后我們也會使用這套框架進行App開發，所以便預先學習一下，順便做下筆記，分享給大家。

首先搭建環境，第一步便是下載Node.js。去官網下載，對應電腦系統版本。

我是Win 10，下載的64位。下載完成后，直接安裝。

可以隨意創建一個一個test.js，來測試Node.js是否安裝成功。

var http = require("http");

http.createServer(function(req, res) {
  res.writeHead( 200 , {"Content-Type":"text/html"});
  res.write("<h1>Node.js</h1>");
  res.write("<p>Hello World</p>");
  res.end("");
}).listen(8080);
console.log("HTTP server is listening at port 8080.");

然后進入到響應的目錄，執行cmd，鍵入命令： node test.js ，然后瀏覽器打開”localhost:8080”，顯示如下則是安裝成功。

OK，下面進行第二步，使用npm指令安裝react-native-cli。打開命令行，執行指令：

npm install -g react-native-cli

react-native-cli是用來開發React Native的命令行工具。你需要使用npm來安裝它。上面這行代碼將會幫助你在terminal中安裝react-native命令。這行cmd命令只需要執行一次，后面便可持續使用。

下面便可以開始創建我們的React Native項目了。

創建好自己的文件夾之后，cmd命令進入文件夾，執行命令：

react-native init HelloWorld

HelloWorld便是項目名，可自己隨意取。

執行完畢之后便會生成HelloWorld文件夾。目錄結構是這樣的：

可以看到生成的項目既包含IOS，也包含Android。因為我是Android開發，所以就暫時不管IOS了。

在命令行執行完畢之后，我們會看到To run your app on Android的提示。進入到HelloWorld文件夾，執行命令：

react-native run-android

圖上所示便是在進行編譯，準備安裝了。編譯成功后，安裝運行，界面如下：

提示不能下載JS bundle。這里我們注意一下編譯時的黃色提示： Starting the packager in a new window is not supported on Windows yet.Please start it manually using 'react-native start'. 就是說不支持在Windows上自動開啟packager，需要我們自己先啟動。

照著提示來，執行命令：

react-native start

可以看到React packager ready.

OK，再來運行我們的程序。此時界面變顯示正常了：

同時React packager會打印一些信息：

很多東西都還不懂，暫時就先不管了，后面再慢慢了解，至少現在看起來沒出什么錯。

下面便來研究一下顯示到界面上的內容到底是怎么來的。

看到HelloWolrd文件夾下有index.android.js文件，編輯器打開，看到的代碼是這樣的：

/** * Sample React Native App * https://github.com/非死book/react-native */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const 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,
  },
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

此時，對著代碼與界面，我們便可以大膽的猜測界面上顯示的文字就是HelloWorld class中對應的3個Text標簽了。下面嘗試一下：

HelloWorld class代碼改成如下：

class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello World!
        </Text>
      </View>
    );
  }
}

我們把之前3個Text標簽去掉，寫一個顯示Hello World的Text標簽。那么改好之后如何看到效果呢？？？請注意，這便是React Native框架非常厲害的地方，你不需要重新編譯安裝apk，更新包等操作，直接虛擬機點出Menu，點擊Roload JS即可實現更新：

可以看到，界面確實是變成了我們預想的樣子。

下面我從官網復制了一份index.android.js代碼：

/**
 * Sample React Native App
 * https://github.com/非死book/react-native
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  Image,
  ListView,
  StyleSheet,
  Text,
  View,
} = React;

var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
var PAGE_SIZE = 25;
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
var REQUEST_URL = API_URL + PARAMS;

var AwesomeProject = React.createClass({
  getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  },

  componentDidMount: function() {
    this.fetchData();
  },

  fetchData: function() {
    fetch(REQUEST_URL)
      .then((response) => response.json()) .then((responseData) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.movies), loaded: true, }); }) .done(); }, render: function() { if (!this.state.loaded) { return this.renderLoadingView(); } return ( <ListView dataSource={this.state.dataSource} renderRow={this.renderMovie} style={styles.listView} /> ); }, renderLoadingView: function() { return ( <View style={styles.container}> <Text> Loading movies... </Text> </View> ); }, renderMovie: function(movie) { return ( <View style={styles.container}> <Image source={{uri: movie.posters.thumbnail}} style={styles.thumbnail} /> <View style={styles.rightContainer}> <Text style={styles.title}>{movie.title}</Text> <Text style={styles.year}>{movie.year}</Text> </View> </View> ); }, }); var styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, rightContainer: { flex: 1, }, title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, year: { textAlign: 'center', }, thumbnail: { width: 53, height: 81, }, listView: { paddingTop: 20, backgroundColor: '#F5FCFF', }, }); AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

然后Reload JS，界面如下：

呀，出錯了。我們看到是在registerComponent的時候出錯了。想起來我們的項目名稱是HelloWorld，將最后一句代碼改掉。

AppRegistry.registerComponent('HelloWorld', () => AwesomeProject);

Reload JS。

加載完畢后的顯示界面：

但是將代碼改成：

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

執行又出錯了：

看來東西不能亂改呀，至于是什么原因，就放在以后慢慢去發現去解決了。另外這種JS代碼的寫法也是需要在實踐中慢慢積累，學習，才能逐步掌握。

今天就到這里了，代碼都是自動生成的，便不上傳了。Have a nice weekend~