react-native-android 以js角度来看RN

我们已经掌握了如何使用android studio与reactnative搭建一个react的基础环境，并使用其成功的制作出了一个hello world，接下来，我们要探索一下如何利用react-native制作出更复杂的android应用。

1. 目录结构

---

    首先我们来回顾一下，我们的helloReact工程的目录结构。

打开CMD，或者终端，我们可以看到helloReact工程下，有三个目录，和三个文件，

1.1 android目录 这个，就是咱们的安卓工程了。

1.2 IOS目录，这个是IOS开发的目录，之后的react-native ios篇，我们再详细聊一下。

1.3 index.android.js 这个是安卓版本的js入口

1.4 index.ios.js 这个是ios版本的js入口

1.5 package.json 这个是本项目，这里记载着项目的基本数据和依赖项。

 

2. 查看项目js

---

我们详细来看一下index.android.js，这里用的是es6的语法，不过对于一般做过前端的人来说，是可以看懂了，做java的应该也大致能看懂这里写的是什么。

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class hellowReact 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('hellowReact', () => hellowReact);

位于上方的1~8行是对于react-native依赖的导入

接下来9~25行，定义了一个react的类，一个简单的类，只需要拥有render方法即可渲染，在render方法中，我们返回了需要渲染的组件的组合。

请注意，在render中返回的并不是字符串，而是JSX语法的组件组合。这些组件渲染至APP中。并且在JSX中，我们直接输出了变量{styles.xxx}，在jsx中，我们的js变量如需输出，则需要放置在界符中{}

请注意，在这里，我们使用js去调用了react-native提供的原生组件，就像网页上的HTML标签一样，这更接近web编程。接下来，我们还会分享更多组件的用法。

27~44行，则大致向我们展示了react-native的样式写法。以一种js的方式去定义样式表，但是属性和取值，使用的也的确很像我们亲切的css

最后将45~46行，将写好的组建，注册至react-native。

 

3. 动手改写，写一个自定义的属性

---

    接下来，我们要自定义一个变量，变量里面填充好数据，待点击后，让View发生变化。

首先我们给hellowReact类，添加构造方法：

class hellowReact extends Component {  constructor(props) {    super(props);    this.state = {        word: 'hello'    };  }  render() {    return (      <View style={styles.container}>        <Text style={styles.welcome}>            {this.state.word}        </Text>      </View>    );  }}

构造方法中，指定了helloReact的state属性，其中有一个word属性。在这里，我们也把render方法改变一下。直接将helloReact组建的state中的word属性，渲染至界面上，摇一摇手中打开的helloReact的APP，点击reloadjs，重新加载我们更改过的js：

此时，我们看到界面上渲染了，我们的word，"hello"。

我们接下来，再对我们的APP进行一些改造：

class hellowReact extends Component {  constructor(props) {    super(props);    this.state = {        word: 'hello'    };  }  changeWord() {    this.setState({      word: 'world'    });  }  render() {    return (      <View style={styles.container} onTouchEnd={this.changeWord.bind(this)}>        <Text style={styles.welcome}>            {this.state.word}        </Text>      </View>    );  }}

我们在View发生touchEnd的时候，调用自定义函数，changeWord。该方法将调用方法setState，将state中的word进行更改。

紧接着，我们再次在APP上reloadjs。渲染的还是之前的hello，我们点击界面，则界面渲染为"world"：

 

4. 回顾一下，我们都干了什么

---

通过上述的实践，我们发现，其实react将我们的界面组件，看做一个状态机，在定义的render方法中，我们将"组件"与"状态"的糅杂--JSX，告知react，react在用户触发了状态变化时，帮我们重新进行了渲染。这个行为，在组件中的体现，就是setState。于是我们惊喜的发现，我们只要更改状态(setState)就好了。至于渲染，则不用太过操心。

而事件绑定，也像极了web编程中的DOM上绑定onclick事件的做法。在touchEnd的时候，会触发我们预先设定好的回掉函数。

 

5. 创建一个react-native-android的简单列表

---

    接下来，我们要一起做一个列表项。首先，我们引入react-native提供的组建，ListView。

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  ListView} from 'react-native';

import的列表中，最后加入ListView。

然后，我们在constructor里面，加入一个状态

  constructor(props) {    super(props);    var list = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});    this.state = {      list: list.cloneWithRows(['hello', 'react', 'this', 'is', 'my', 'listView'])    };  }

是一个符合ListView格式的数据源。接下来，我们在render中渲染这个ListView：

  render() {    return (      <View style={styles.container}>        <ListView          dataSource={this.state.list}          renderRow={this.oneRow}        />      </View>    );  }

其中，renderRow属性，指定的是，渲染ListView中每一项的方法。我们可以直接写个比较简单的text组件。

  oneRow(oneItem) {    return <Text>{oneItem}</Text>;  }

我们看看整体的代码：

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  ListView} from 'react-native';class hellowReact extends Component {  constructor(props) {    super(props);    var list = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});    this.state = {      list: list.cloneWithRows(['hello', 'react', 'this', 'is', 'my', 'listView'])    };  }  oneRow(oneItem) {    return <Text>{oneItem}</Text>;  }  render() {    return (      <View style={styles.container}>        <ListView          dataSource={this.state.list}          renderRow={this.oneRow}        />      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },});AppRegistry.registerComponent('hellowReact', () => hellowReact);

保存后，我们reload一下新改好的js：

结果如图所示：

这里，我们学会了，如何使用js去调用react-native提供的原生组件。