React Native For Android初探

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native。React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。

对于不太了解React Native是什么以及Facebook为什么要创建React Native，可以先看看这篇博客。

Facebook 于 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/facebook/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/facebook/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~