實(shí)現(xiàn)如圖所示滾動視圖，外層<ScrollView>包裹，里面使用ListView設(shè)置數(shù)據(jù)源。

滾動視圖.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數(shù)據(jù)
var TopMenu = require('../../LocalData/TopMenu.json');

// 引入外部組件
var TopListView = require('./XMGTopListView');

var TopView = React.createClass({

  getInitialState(){
    return{
      activePage: 0
    }
  },

  render() {
    return (
      <View style={styles.container}>
        { /*內(nèi)容部分*/ }
        <ScrollView
          //滾動方向 橫向還是豎向
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={false}
          onMomentumScrollEnd = {this.onScrollAnimationEnd}
          >
          {this.renderScrollItem()}
        </ScrollView>
        { /*頁碼部分*/ }
        <View style={styles.indicatorViewStyle}>
          {this.renderIndicator()}
        </View>
      </View>
    );
  },

//當(dāng)一禎滾動結(jié)束的時(shí)候調(diào)用
onScrollAnimationEnd(e){
  //求出當(dāng)前的頁碼
  var currentPage = Math.floor(e.nativeEvent.contentOffset.x / width);//取整
  //更新狀態(tài)機(jī)
  this.setState({
    activePage: currentPage
  });
},

  //ScrollView中內(nèi)部的組件
  renderScrollItem(){
    //定義組件數(shù)組
    var itemArr = [];
    //定義顏色數(shù)組 ---> 數(shù)據(jù)數(shù)組
    var dataArr = TopMenu.data;
    //遍歷創(chuàng)建組件
    for (var i = 0; i < dataArr.length; i++) {
      itemArr.push(
        <TopListView key={i}
          dataArr={dataArr[i]}
         />
      );
    }
    //返回組件數(shù)組
    return itemArr;
  },

  //頁碼（指示器）
  renderIndicator(){
    //指示器數(shù)組
    var indicatorArr = [], style;
    //遍歷創(chuàng)建組件
    for (var i = 0; i < 2; i++) {
      //設(shè)置圓點(diǎn)的樣式
      style = (i === this.state.activePage) ? {color:'orange'} : {color:'gray'}
      indicatorArr.push(
        <Text key={i} style={[{fontSize:20},style]}>&bull;</Text> //圓點(diǎn)
      );
    }
    //返回?cái)?shù)組
    return indicatorArr;
  }
});

var styles = StyleSheet.create({
  container: {
    backgroundColor: 'white'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  indicatorViewStyle: {
    //設(shè)置主軸方向，橫向
    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(){
    //創(chuàng)建數(shù)據(jù)源
    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: {
    //設(shè)置主軸方向
    flexDirection:'row',
    //多個(gè)cell在同一行顯示
    flexWrap:'wrap',
    //寬度
    width:width
  },
  cellStyle: {
    backgroundColor:'white',
    width:cellW,
    height:cellH,
    //水平居中和垂直居中
    justifyContent:'center',
    alignItems:'center',
    //設(shè)置間距
    marginTop:5,
    marginLeft:vMargin
  },
  titleStyle: {
    fontSize: Platform.OS == 'ios' ? 13 : 12 ,
    textAlign:'center',
    color:'gray'
  }
});

module.exports = TopListView;