如何像应用商店一样实现水平滚动视图答案

【问题标题】：How to implement a horizontal scrollview like an appstore如何像应用商店一样实现水平滚动视图
【发布时间】：2018-09-12 08:28:17
【问题描述】：

如何实现类似应用商店的滚动视图？我要滚动到下一个内容，当滚动到一半时

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

您可以使用FlatList 简单地实现它，使用horizontal 和pagingEnabled 布尔属性和deviceWidth；

import React from 'react';
import { StyleSheet, Dimensions, ScrollView, View, Text } from 'react-native';

const deviceWidth = Dimensions.get('window').width;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  page: {
    width: deviceWidth
  },

});

const Slider = () => (
  <View style={styles.container}>
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      pagingEnabled>
      <View style={styles.page}>
        <Text> This is View 1 </Text>
      </View>
      <View style={styles.page}>
        <Text> This is View 2 </Text>
      </View>
    </ScrollView>
  </View>
);

【讨论】：

谢谢，喜欢图片我如何在当前滚动中显示一些下一个滚动内容？
我在玩它：只需将 仅第一页 的样式设置为 width: deviceWidth * 0.9, 并将所有其他页面的样式设置为 width: deviceWidth 即可得到相同的结果。

【解决方案2】：

您正在寻找的特性或功能是一个简单的水平滑块。使用可以使用这个 npm 库来获取您正在寻找的内容：https://www.npmjs.com/package/react-native-snap-carousel

【讨论】：

【解决方案3】：

我推荐使用 Flatlist，它是 React-Native 自己的组件。

如果您想水平滑动数据，请使用 Flatlist 中的 horizontal={true} 属性。

【讨论】：

我不确定这是否是正确的方法。该操作要求“捕捉”行为我不确定平面列表是否已经支持该行为

【解决方案4】：

你想要这样的东西吗？

源码：https://snack.expo.io/@gusgard/react-native-swiper-flatlist-2

图书馆：https://www.npmjs.com/package/react-native-swiper-flatlist

【讨论】：