[React Native Android安利系列]创建简单RN应用(以js角度来看RN)

   <p>书接上回，我们已经掌握了如何使用android studio与reactnative搭建一个react的基础环境，并使用其成功的制作出了一个hello world，接下来，我们要探索一下如何利用react-native制作出比HelloWorld复杂一点的界面(虽然是个界面都比helloWorld复杂)，顺便一起审视一些ReactNativeAndroid工程的目录结构。</p>    <h2>1. 目录结构</h2>    <p>首先我们来回顾一下，我们的helloReact工程的目录结构。</p>    <p>打开CMD，或者终端，我们可以看到helloReact工程下，有三个目录，和三个文件，如图1.1所示</p>    <p><img src="https://simg.open-open.com/show/295a10015e7e07ec7e26f36b73c96662.png"></p>    <p>图1.1</p>    <p>1.1 android目录</p>    <p>这个就是咱们的安卓工程了。里面存放着生成的android应用代码。</p>    <p>1.2 IOS目录</p>    <p>这个是IOS开发的目录，之后的react-native ios篇，我们再详细聊一下。</p>    <p>1.3 index.android.js</p>    <p>这个是安卓版本的js入口。</p>    <p>1.4 index.ios.js</p>    <p>这个是ios版本的js入口。</p>    <p>1.5 package.json</p>    <p>这个是本项目，这里记载着项目的基本数据和依赖项。</p>    <p>1.6 node_modules</p>    <p>这个是项目依赖的npm库的代码。其中当然也包括ReactNative代码的源码，在之后的章节里面，我们将会一起来读一下ReactNative的源代码。</p>    <h2>2. 查看项目js</h2>    <p>我们详细来看一下index.android.js，这里用的是es6的语法，不过对于一般做过前端的人来说，是可以看懂了，做java的应该也大致能看懂这里写的是什么。</p>    <pre>  <code class="language-javascript">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);</code></pre>    <p>位于上方的1~8行是对于react-native依赖的导入</p>    <p>接下来9~25行，定义了一个react的类，一个简单的类，只需要拥有render方法即可渲染，在render方法中，我们返回了需要渲染的组件的组合。</p>    <p>请注意，在render中返回的并不是字符串，而是JSX语法的组件组合。这些组件渲染至APP中。并且在JSX中，我们直接输出了变量{styles.xxx}，在jsx中，我们的js变量如需输出，则需要放置在界符中{}</p>    <p>再次注意，在这里，我们使用js去调用了react-native提供的原生组件，就像网页上的HTML标签一样，这更接近web编程。接下来，我们还会分享更多组件的用法。</p>    <p>27~44行，则大致向我们展示了react-native的样式写法。以一种js的方式去定义样式表，但是属性和取值，使用的也的确很像我们亲切的css</p>    <p>最后将45~46行，将写好的组建，注册至react-native。</p>    <h2>3. 动手改写，写一个自定义的属性</h2>    <p>接下来，我们要自定义一个变量，变量里面填充好数据，待点击后，让View发生变化。</p>    <p>首先我们给hellowReact类，添加构造方法：</p>    <pre>  <code class="language-javascript">class hellowReact extends Component {    constructor(props) {      super(props);      // 定义了初始的状态      this.state = {          word: 'hello'      };    }      render() {      // 在JSX中，直接使用state中定义的word->this.state.word，并进行输出      return (        <View style={styles.container}>          <Text style={styles.welcome}>              {this.state.word}          </Text>        </View>      );    }  }</code></pre>    <p>构造方法中，指定了helloReact的state属性，其中有一个word属性。在这里，我们也把render方法改变一下。直接将helloReact组建的state中的word属性，渲染至界面上，摇一摇手中打开的helloReact的APP，点击reloadjs，重新加载我们更改过的js(结果如图3.1所示)</p>    <p><img src="https://simg.open-open.com/show/62f7b5a17708d2da859bc651a0d73961.png"></p>    <p>图3.1</p>    <p>此时，我们看到界面上渲染了，我们的word，"hello"。</p>    <p>接下来，我们需要再次对我们的APP进行一些改造</p>    <pre>  <code class="language-javascript">class hellowReact extends Component {    constructor(props) {      super(props);      this.state = {          word: 'hello'      };    }    // 更改state中word的函数    changeWord() {      // 更改状态，将word变量，更改为'world'      this.setState({        word: 'world'      });    }      render() {      // 点击时触发changeWord函数，更改状态      return (        <View style={styles.container} onTouchEnd={this.changeWord.bind(this)}>          <Text style={styles.welcome}>              {this.state.word}          </Text>        </View>      );    }  }</code></pre>    <p>我们在View发生touchEnd的时候，调用自定义函数，changeWord。该方法将调用方法setState，将state中的word进行更改。</p>    <p>紧接着，我们再次在APP上reloadjs。渲染的还是之前的hello，我们点击界面，则界面渲染为"world"(如图3.2所示)</p>    <p><img src="https://simg.open-open.com/show/9479a0d50e9d556379844e71cca71638.png"></p>    <p>图3.2</p>    <h2>4. 回顾一下，我们都干了什么</h2>    <p>通过上述的实践，我们发现，其实react将我们的界面组件，看做一个状态机，在定义的render方法中，我们将"组件"与"状态"的糅杂--JSX，告知react，react在用户触发了状态变化时，帮我们重新进行了渲染。这个行为，在组件中的体现，就是setState。于是我们惊喜的发现，我们只要更改状态(setState)就好了。至于渲染，则不用操心，我们调用了setState，界面自动就被重新渲染了。</p>    <p>而事件绑定，也像极了web编程中的DOM上绑定onclick事件的做法。在touchEnd的时候，会触发我们预先设定好的回掉函数。</p>    <h2>5. 创建一个react-native-android的简单列表</h2>    <p>接下来，我们要一起做一个列表项。首先，我们引入react-native提供的组建，ListView。</p>    <pre>  <code class="language-javascript">import React, { Component } from 'react';  import {    AppRegistry,    StyleSheet,    Text,    View,    ListView  } from 'react-native';</code></pre>    <p>import的列表中，最后加入ListView。</p>    <p>然后，我们在constructor里面，加入一个状态</p>    <pre>  <code class="language-javascript">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'])      };    }</code></pre>    <p>是一个符合ListView格式的数据源。接下来，我们在render中渲染这个ListView</p>    <pre>  <code class="language-javascript">render() {      return (        <View style={styles.container}>          <ListView            dataSource={this.state.list}            renderRow={this.oneRow}          />        </View>      );    }</code></pre>    <p>其中，renderRow属性，指定的是，渲染ListView中每一项的方法。我们可以直接写个比较简单的text组件。</p>    <pre>  <code class="language-javascript">oneRow(oneItem) {      return <Text>{oneItem}</Text>;    }</code></pre>    <p>我们看看整体的代码</p>    <pre>  <code class="language-javascript">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) {      // 提供列表中，每一个item的渲染方式      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);</code></pre>    <p>保存后，我们reload一下新改好的js。结果如图5.1所示</p>    <p><img src="https://simg.open-open.com/show/4d7bdf68c15f0ad695210b4c7daa9118.png"></p>    <p>图5.1</p>    <p>这里，我们学会了，如何使用js去调用react-native提供的原生组件。原生组件有很多，基本能覆盖我们日常开发需要的基础组件(如刚刚的ListView/View/Text等)，但是还有很多我们个性化的需求，无法满足的时候，我们又该怎么办呢？这一系列会详细讲解React中js调用原生代码的方法。</p>    <p>上述讲解，可以在这里找到相关例子：</p>    <p><a href="/misc/goto?guid=4959675721675519408" rel="nofollow,noindex">https://github.com/houyu01/re...</a></p>    <p>下节更精彩，我们将来一起看看android原生的小知识，加强我们开发react-native的底层了解。不要走开，请关注我.....</p>    <h2>系列文章</h2>    <p><a href="http://www.open-open.com/lib/view/open1469582136031.html">[React Native Android安利系列]搭建React Native Android环境</a> <br> [React Native Android安利系列]创建简单 RN 应用(以js角度来看RN)<br> <a href="http://www.open-open.com/lib/view/open1469582062537.html">[React Native Android安利系列]原生小知识(创建activity并跳转)</a></p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000006059149</p>    <p> </p>