React Native 在Android中的实际使用

本文认为您已经对React Native（以下称RN）已经有一定的了解，并且有一定的Android开发基础。讲述前提是您已经像本文作者一样，搭建好了RN的开发环境。本文只讲解RN（本项目基于RN-0.36）在实际项目中的使用，并不是开发教程，也不会介绍其实现原理，请读者知晓。

• 本文作者实现的效果
• 从头开始开发

本文作者实现的效果

由于效果视频较大，而且作者并不会转GIF，所以，请点击并下载其中的MP4文件(8M未压缩)以查看效果
[本文作者录制的效果视频 ]

从头开始开发

从效果中可以看出，这是某App的首页效果，看了是不是觉得与Android原生还是可以媲美一下呢？下面，我们就来实现这个效果。
首先，在Android开发中，这是一个明显的ListView，有几种类型的ViewType，在原生的实现方式是ListView+BaseAdapter+ViewHolder或者RecyclerView+Adapter。而在RN中，也用了类似的思想，不过代码量要比原生的少一些。

第一步：新建项目
cd进入一个文件夹，执行命令react-native init MainPageTest，命令执行完毕后，您的当前文件夹下会生成一个MainPageTest文件夹，也就是您以后的项目目录。

第二步：导入项目
一般来说，需要分别导入RN项目和Android项目，这里，作者推荐使用Intellij Idea进行开发。导入这里作者不做太多介绍。如有问题，可以联系作者。
第三步：启动JS服务
cd到您刚才新建的目录下面，执行命令react-native start

第四步：运行Android程序
把您刚才导入的Android项目跑起来，就会看到最开始的效果。这时候您可以对应查看并且修改一下index.android.js里面的代码，也是初步接触一下相关语法和代码写法。
第五步：写出我们自己的代码

import {
    AppRegistry
} from @H_403_67@'react-native';

//这里采取分包方案,方便后期维护
import MainPageTest from @H_403_67@"./appTest2";

AppRegistry.registerComponent(@H_403_67@'MainPageTest',() => MainPageTest);

上面的appTest2是作者新建的一个JS文件，用来加强代码的结构性，这里的index.android.js只做入口，不做功能和业务。

import React,{Component} from @H_403_67@'react';
import {
    Text,View,ActivityIndicator,ListView,Image,TouchableOpacity
} from @H_403_67@'react-native';

这些代码读者需要特别注意，但凡是下面代码中用到的控件都需要用上述方式import，否则，会报undefind错误。

export default class extends Component {
    constructor(props) {
        super(props);
    }
}

在appTest2.js中，我们需要首先写上这段代码，作为class入口和class构造函数。

render() {
            return (
                <View @H_404_122@style={styles.container}>
                <Text>开始开发</Text>
                </View>
            );

这段代码用来渲染界面。其中的styles作者抽出来放在了外部。如下：

import styles from @H_403_67@'./style/index.css';

需要在项目目录下新建一个style文件夹，在style文件夹下新建一个index.css.js文件。代码贴出来：
CSS_Layout，是一种css风格的UI布局写法。具体属性的含义请读者自行搜索。

import {
    StyleSheet,Dimensions,PixelRatio,} from @H_403_67@'react-native';
var deviceWidth = Dimensions.get(@H_403_67@'window').width;
var pix = Dimensions.get(@H_403_67@'window').pixelDepth;
//所有的style配置于此
export default StyleSheet.create({
    container: {
        paddingTop: 16,paddingBottom: 16,flex: 1,flexDirection: @H_403_67@'column',backgroundColor: @H_403_67@'#F5FCFF',},);

今天我们只画出Banner。Banner是一个ViewPager，这里我们使用github上的一个开源控件[react-native-viewpager]

在使用前，需要进入您的项目目录执行npm install react-native-viewpager –save，执行成功之后才能使用。

import ViewPager from @H_403_67@'react-native-viewpager';

this.state = ({
            @H_404_122@viewPagerDataSource: (new ViewPager.DataSource({pageHasChanged: (r1,r2) => r1 !== r2})).cloneWithPages(data),});

return (
            <ViewPager
                style={this.props.style}
                dataSource={this.state.viewPagerDataSource}
                renderPage={this._renderPage.bind(this)}
                isLoop={true}
                autoPlay={false}/>
        );

//渲染Banner图片 _renderPage(data) { return ( <Image  @H_404_122@source={{uri: data.imgUrl}} @H_404_122@style={styles.page}/> ); }

上述步骤非常重要，viewpager必须先设置数据源，在没有请求网络的情况下，在构造函数中初始化数据源即可。这里只写实现方法，并不会一行行解释代码，请读者自行实现，如果遇到问题，请联系作者。