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

Question

如何实现像应用商店这样的滚动视图？当滚动完成一半时，我将滚动到下一个内容

标签： reactjsreact-native

Answer 1

您可以使用FlatList、 usinghorizontal和pagingEnabledboolean props 和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>
);