React-Native ScrollView实现滚动效果

**效果图: **

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableOpacity,
  Image,
  Dimensions,
  Platform
} from 'react-native';

const width = Dimensions.get('window').width;
// 全局的变量
const cols = 5;
const cellW = Platform.OS == 'ios' ? 70 : 60;
const cellH = 75;
var vMargin = (width - cellW * cols) / (cols + 1);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  titleStyle: {
    fontSize:Platform.OS == 'ios' ? 14 : 12,
    color:'gray'
  },
  contentViewStyle: {
    // 设置主轴的方向
    flexDirection:'row',
    // 宽度
    width:width,
    // 多个cell在同一行显示
    flexWrap:'wrap'
  },
  cellStyle: {
    width:cellW,
    height:cellH,
    // 水平居中和垂直居中
    justifyContent:'center',
    alignItems:'center',
    marginTop:10,
    marginLeft:vMargin
  }
});

export default class YhTopListView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged:(row1, row2) => row1 !== row2,
      }),
    };
  }

  componentWillMount() {
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.props.dataArr)
    });
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
        contentContainerStyle={styles.contentViewStyle}
        scrollEnabled={false}
      />
    );
  }

  renderRow(rowdata) {
    return(
      <TouchableOpacity style={styles.cellStyle} onPress={()=>{alert('0')}}>
        <View style={styles.cellStyle}>
          <Image source={{uri: rowdata.image}} style={{width:52, height:52}}/>
          <Text style={styles.titleStyle}>{rowdata.title}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

2. 通过循环对cell进行赋值，数据来源于外部json文件

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView,
  Dimensions
} from 'react-native';

import TopListView from './YhTopListView';
const width = Dimensions.get('window').width;

// 引入外部的json数据
const TopMenu = require('../../LocalData/TopMenu.json');

const styles = StyleSheet.create({
  container: {
    backgroundColor:'white'
  },
  indicatorViewStyle: {
    // 改变主轴的方向
    flexDirection:'row',
    // 水平居中
    justifyContent:'center'
  }
});

class YhTopView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      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
    });
  }

  renderScrollItem() {
    // 组件数组
    const itemArr = [];
    // 数据数组
    const 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: 25}, style]}>•</Text>
      );
    }
    return indicatorArr;
  }
}

export default YhTopView;

3. 引用

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ScrollView
} from 'react-native';

import TopView from './YhTopView';
const width = Dimensions.get('window').width;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e8e8e8'
  }
});

class YhHome extends Component {
  render() {
    return (
        <View style={styles.container}>
          <ScrollView>
            <TopView/>
          </ScrollView>
        </View>
    );
  }
}

export default YhHome;