rn 实现上下滑动选择列表_RN笔记-ScrollView+ListView实现滚动视图

实现如图所示滚动视图，外层包裹，里面使用ListView设置数据源。

滚动视图.png

TopView组件，ScrollView的使用：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

ScrollView,

ListView,

Image

} from 'react-native';

var Dimensions = require('Dimensions');

var {width} = Dimensions.get('window');

//引入外部的json数据

var TopMenu = require('../../LocalData/TopMenu.json');

// 引入外部组件

var TopListView = require('./XMGTopListView');

var TopView = React.createClass({

getInitialState(){

return{

activePage: 0

}

},

render() {

return (

{ /*内容部分*/ }

//滚动方向 横向还是竖向

horizontal={true}

pagingEnabled={true}

showsHorizontalScrollIndicator={false}

onMomentumScrollEnd = {this.onScrollAnimationEnd}

>

{this.renderScrollItem()}

{ /*页码部分*/ }

{this.renderIndicator()}

);

},

//当一祯滚动结束的时候调用

onScrollAnimationEnd(e){

//求出当前的页码

var currentPage = Math.floor(e.nativeEvent.contentOffset.x / width);//取整

//更新状态机

this.setState({

activePage: currentPage

});

},

//ScrollView中内部的组件

renderScrollItem(){

//定义组件数组

var itemArr = [];

//定义颜色数组 ---> 数据数组

var dataArr = TopMenu.data;

//遍历创建组件

for (var i = 0; i < dataArr.length; i++) {

itemArr.push(

dataArr={dataArr[i]}

/>

);

}

//返回组件数组

return itemArr;

},

//页码(指示器)

renderIndicator(){

//指示器数组

var indicatorArr = [], style;

//遍历创建组件

for (var i = 0; i < 2; i++) {

//设置圆点的样式

style = (i === this.state.activePage) ? {color:'orange'} : {color:'gray'}

indicatorArr.push(

• //圆点

);

}

//返回数组

return indicatorArr;

}

});

var styles = StyleSheet.create({

container: {

backgroundColor: 'white'

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

indicatorViewStyle: {

//设置主轴方向，横向

flexDirection: 'row',

//水平居中

justifyContent: 'center'

}

});

module.exports = TopView;

ListView的使用：

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

Image,

ListView,

TouchableOpacity,

Platform

} from 'react-native';

var Dimensions = require('Dimensions');

var {width} = Dimensions.get('window');

//全局的变量

var cols = 5;

var cellW = Platform.OS == 'ios' ? 70 : 60;

var cellH = Platform.OS == 'ios' ? 70 : 60;

var vMargin = (width - cellW * cols) / (cols + 1);

var TopListView = React.createClass({

getDefaultProps(){

return{

dataArr: []

}

},

getInitialState(){

//创建数据源

var ds = new ListView.DataSource({rowHasChanged:(row1, row2)=> row1 !== row2});

return{

dataSource: ds.cloneWithRows(this.props.dataArr)

}

},

render() {

return (

dataSource={this.state.dataSource}

renderRow={this.renderRow}

contentContainerStyle={styles.contentViewStyle}

//禁止上下滚动

scrollEnabled={false}

/>

);

},

//具体的cell

renderRow(rowdata){

return(

{alert('详情')}}>

{rowdata.title}

);

},

});

var styles = StyleSheet.create({

contentViewStyle: {

//设置主轴方向

flexDirection:'row',

//多个cell在同一行显示

flexWrap:'wrap',

//宽度

width:width

},

cellStyle: {

backgroundColor:'white',

width:cellW,

height:cellH,

//水平居中和垂直居中

justifyContent:'center',

alignItems:'center',

//设置间距

marginTop:5,

marginLeft:vMargin

},

titleStyle: {

fontSize: Platform.OS == 'ios' ? 13 : 12 ,

textAlign:'center',

color:'gray'

}

});

module.exports = TopListView;