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 'react-native';
//这里采取分包方案,方便后期维护
import MainPageTest from "./appTest2";
AppRegistry.registerComponent('MainPageTest',() => MainPageTest);
上面的appTest2是作者新建的一个JS文件，用来加强代码的结构性，这里的index.android.js只做入口，不做功能和业务。
import React,{Component} from 'react';
import {
Text,View,ActivityIndicator,ListView,Image,TouchableOpacity
} from 'react-native';
这些代码读者需要特别注意，但凡是下面代码中用到的控件都需要用上述方式import，否则，会报undefind错误。
export default class extends Component {
constructor(props) {
super(props);
}
}
在appTest2.js中，我们需要首先写上这段代码，作为class入口和class构造函数。
render() {
return (
<View style={styles.container}>
<Text>开始开发</Text>
</View>
);
这段代码用来渲染界面。其中的styles作者抽出来放在了外部。如下：
import styles from './style/index.css';
需要在项目目录下新建一个style文件夹，在style文件夹下新建一个index.css.js文件。代码贴出来：
CSS_Layout，是一种css风格的UI布局写法。具体属性的含义请读者自行搜索。
import {
StyleSheet,Dimensions,PixelRatio,} from 'react-native';
var deviceWidth = Dimensions.get('window').width;
var pix = Dimensions.get('window').pixelDepth;
//所有的style配置于此
export default StyleSheet.create({
container: {
paddingTop: 16,paddingBottom: 16,flex: 1,flexDirection: 'column',backgroundColor: '#F5FCFF',},);
今天我们只画出Banner。Banner是一个ViewPager，这里我们使用github上的一个开源控件[react-native-viewpager]
在使用前，需要进入您的项目目录执行npm install react-native-viewpager –save，执行成功之后才能使用。
import ViewPager from 'react-native-viewpager';
this.state = ({
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 source={{uri: data.imgUrl}} style={styles.page}/> ); }
上述步骤非常重要，viewpager必须先设置数据源，在没有请求网络的情况下，在构造函数中初始化数据源即可。这里只写实现方法，并不会一行行解释代码，请读者自行实现，如果遇到问题，请联系作者。
