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

侯医生

欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有
https://segmentfault.com/blog...

书接上回,我们已经掌握了如何使用android studio与reactnative搭建一个react的基础环境,并使用其成功的制作出了一个hello world,接下来,我们要探索一下如何利用react-native制作出比HelloWorld复杂一点的界面(虽然是个界面都比helloWorld复杂),顺便一起审视一些ReactNativeAndroid工程的目录结构。

1. 目录结构

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

打开CMD,或者终端,我们可以看到helloReact工程下,有三个目录,和三个文件,如图1.1所示

图1.1

1.1 android目录     这个就是咱们的安卓工程了。里面存放着生成的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   这个是本项目,这里记载着项目的基本数据和依赖项。
1.6 node_modules   这个是项目依赖的npm库的代码。其中当然也包括ReactNative代码的源码,在之后的章节里面,我们将会一起来读一下ReactNative的源代码。

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() {
    // 在JSX中,直接使用state中定义的word->this.state.word,并进行输出
    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(结果如图3.1所示)

232558_LoqS_1177792.png
图3.1

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

接下来,我们需要再次对我们的APP进行一些改造

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

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

紧接着,我们再次在APP上reloadjs。渲染的还是之前的hello,我们点击界面,则界面渲染为"world"(如图3.2所示)

233405_ktgz_1177792.png
图3.2

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

通过上述的实践,我们发现,其实react将我们的界面组件,看做一个状态机,在定义的render方法中,我们将"组件"与"状态"的糅杂--JSX,告知react,react在用户触发了状态变化时,帮我们重新进行了渲染。这个行为,在组件中的体现,就是setState。于是我们惊喜的发现,我们只要更改状态(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) {
    // 提供列表中,每一个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);

保存后,我们reload一下新改好的js。结果如图5.1所示

000502_fHJK_1177792.png
图5.1

这里,我们学会了,如何使用js去调用react-native提供的原生组件。原生组件有很多,基本能覆盖我们日常开发需要的基础组件(如刚刚的ListView/View/Text等),但是还有很多我们个性化的需求,无法满足的时候,我们又该怎么办呢?这一系列会详细讲解React中js调用原生代码的方法。

上述讲解,可以在这里找到相关例子:

https://github.com/houyu01/re...

下节更精彩,我们将来一起看看android原生的小知识,加强我们开发react-native的底层了解。不要走开,请关注我.....

如果喜欢本文请点击下方的推荐哦,你的推荐会变为我继续更文的动力。

阅读 3.6k

前端小站
讲解前端知识的小站,讲解你不知道的前端
2.5k 声望
823 粉丝
0 条评论
2.5k 声望
823 粉丝
宣传栏