import React, { Component } from 'react';
import {
Text,
View,
FlatList,
StyleSheet,
Image,
TouchableOpacity,
Dimensions,
} from 'react-native';
const { width: screenWidth } = Dimensions.get('window');
const items = [
{
title: '内容1',
image: { uri: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg' },
},
{
title: '内容2',
image: { uri: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg' },
},
{
title: '内容3',
image: { uri: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg' },
},
{
title: '内容4',
image: { uri: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg' },
},
{
title: '内容5',
image: { uri: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg' },
},
{
title: '内容6',
image: { uri: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg' },
},
{
title: '内容7',
image: { uri: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg' },
},
{
title: '内容8',
image: { uri: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg' },
},
];
export default class Slider extends Component {
constructor(props) {
super(props);
this.state = {
isViewable: 0,
isShow: false,
};
this.contentViewMap = [
{ View: null, value: 0 },
{ View: null, value: 1 },
];
}
renderSliderList = ({ item }) => (
<View style={styles.windowWidth}>
{item.View}
</View>
)
renderItem = ({ item }) => (
<TouchableOpacity
style={styles.item}
onPress={() => this.onPressCell(item)}
>
<Image
style={styles.icon}
source={item.image}
/>
<Text style={styles.itemsTitle}>{item.title}</Text>
</TouchableOpacity>
);
renderOne = () => (
<FlatList
numColumns={3}
data={items.slice(0, 6)}
renderItem={this.renderItem}
keyExtractor={(_, index) => index.toString()}
/>
)
renderTwo = () => (
<FlatList
numColumns={1}
data={items.slice(6)}
renderItem={this.renderItem}
keyExtractor={(_, index) => index.toString()}
/>
)
onViewableItemsChanged = (change) => {
// change包含来这个FlatList中的所有内容,当滑动滑块时总是将上一个滑块的内容最后打印
if (change.viewableItems.length === 2) { // 判断是否是第一次加载的内容,如果是就将isShow设置为true
this.setState({
isShow: true,
});
}
const data = change.changed[0];
this.setState({
isViewable: data.index,
});
}
render() {
const { isViewable, isShow } = this.state;
// 这里不直接用Flatlist是因为在在这里用的话,不能显示字体,所以将每个分页中的内容存起来
this.contentViewMap[0].View = this.renderOne();
this.contentViewMap[1].View = this.renderTwo();
const leftStyle = (isViewable === 1 || !isShow) ? styles.leftSlider : styles.rightSlider;
const rightStyle = (isViewable === 0 && isShow) ? styles.leftSlider : styles.rightSlider;
return (
<View>
<View>
<FlatList
data={this.contentViewMap}
horizontal={true} // 左右滑动
pagingEnabled={true} // 按页滑动
showsHorizontalScrollIndicator={false} // 去除水平方向的滚动条
showsVerticalScrollIndicator={false} // 去除垂直方向的滚动条
renderItem={this.renderSliderList}
onViewableItemsChanged={this.onViewableItemsChanged} // 滑动页面触发
keyExtractor={(_, index) => index.toString()}
/>
<View style={styles.sliderBox}>
<View style={leftStyle}></View>
<View style={rightStyle}></View>
</View>
</View>
</View>
);
}
}
const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
windowWidth: {
width: screenWidth,
},
item: {
width: width / 3,
height: width / 3.5,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
icon: {
width: 46,
height: 46,
},
leftSlider: {
width: 20,
height: 4,
backgroundColor: '#BCC3CA',
borderRadius: 2,
},
rightSlider: {
width: 8,
height: 4,
borderRadius: 2,
backgroundColor: '#E8E8E8',
},
sliderBox: {
flexDirection: 'row',
width: screenWidth,
justifyContent: 'center',
},
itemsValue: {
fontSize: 10,
color: '#ccc',
marginTop: 4,
},
itemsTitle: {
lineHeight: 17,
fontSize: 14,
color: '#25313C',
marginTop: 10,
},
});