**效果图: **
实现思路:
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 (
<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;
