时间戳

首页 > 解决方案 > FlatList 中的水平滚动 - React Native

react-native - FlatList 中的水平滚动 - React Native

问题描述

我正在使用 flatlist 列出数据。但是在列出数据时，它垂直列出，我希望它水平排序。所以我不想向下滚动，而是想左右滚动。我认为它称为 pagingEnabled。我怎样才能做到这一点？

<FlatList
                    style={{
                        flex: 1

                    }}
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                    data={this.state.allReasons}
                    keyExtractor={(item,index)=>index.toString()}
                    renderItem={({ item ,index}) => {
                        return (

                          <ScrollView onScroll={(event)=>{
                    this.setState({
                        activePage:Math.round(parseFloat(event.nativeEvent.contentOffset.x/Dimensions.get('window').width))
                    })
               
            }}
            style={{width:'100%'}} showsHorizontalScrollIndicator={false} pagingEnabled={true} horizontal={true}>

                                       <View style={{width:'100%'}}>
             

   <Image style={{   resizeMode: 'contain',width:Dimensions.get('window').width,height:250}} source={{uri:"http://ledslider.stechomeyazilim.com/" + item.Slider_Image}}/>
 .....

 </View>

标签： react-native

解决方案

在 Flatlist 中添加水平道具，如

horizontal={true}

尝试从项目中删除滚动视图可能会导致问题

推荐阅读