React-Native ScrollView实现滚动效果

**效果图: **

实现思路:
1. 将cell封装成一个单独的组件，代码如下

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 (
      
    );
  }

  renderRow(rowdata) {
    return(
      {alert('0')}}>
        
          
          {rowdata.title}
        
      
    );
  }
}

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 (
      
        {/*内容部分*/}
        
          {this.renderScrollItem()}
        
        {/*页码部分*/}
        
          {this.renderIndicator()}
        
      
    );
  }

  // 当一帧滚动结束的时候调用
  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(
        
      );
    }
    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;
  }
}

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 (
        
          
            
          
        
    );
  }
}

export default YhHome;