RN笔记-ScrollView+ListView实现滚动视图

实现如图所示滚动视图，外层<ScrollView>包裹，里面使用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 (
      <View style={styles.container}>
        { /*内容部分*/ }
        <ScrollView
          //滚动方向 横向还是竖向
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          onMomentumScrollEnd = {this.onScrollAnimationEnd}
          >
          {this.renderScrollItem()}
        </ScrollView>
        { /*页码部分*/ }
        <View style={styles.indicatorViewStyle}>
          {this.renderIndicator()}
        </View>
      </View>
    );
  },

//当一祯滚动结束的时候调用
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(
        <TopListView key={i}
          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(
        <Text key={i} style={[{fontSize:20},style]}>&bull;</Text> //圆点
      );
    }
    //返回数组
    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 (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
          contentContainerStyle={styles.contentViewStyle}
          //禁止上下滚动
          scrollEnabled={false}
        />
      </View>
    );
  },
  //具体的cell
  renderRow(rowdata){
    return(
          <View style={styles.cellStyle}>
            <TouchableOpacity onPress={()=>{alert('详情')}}>
                <Image source={{uri:rowdata.image}} style={{width:42,height:42}} />
                <Text style={styles.titleStyle}>{rowdata.title}</Text>
            </TouchableOpacity>
          </View>
    );
  },
});

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;