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

Question

如何像appstore一样实现滚动视图？ 当滚动完成一半时，我将滚动到下一个内容

Answer 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>
);

Answer 2

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

Answer 3

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

如果要水平滑动数据，请使用Flatlist中的道具horizontal={true}。

Answer 4

您想要这样的东西吗？

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

库：https://www.npmjs.com/package/react-native-swiper-flatlist