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开发，所以便预先学习一下，顺便做下笔记，分享给大家。

我是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~

</div>

来自： http://blog.csdn.net/lastwarmth/article/details/50524934