reactjs - 使用 scrollview 的 react-native 自滚动效果

Question

我不确定标题是否准确，但我想在 react-native 中实现类似的东西

注意当用户从右到左快速滚动时它是如何自动滚动一段时间的。

这就是我所拥有的

这就是我的代码的样子

<ScrollView
  style={{ ...styles.scrollView }}
  horizontal={true}
  contentContainerStyle={styles.scrollViewContainer}
  showsHorizontalScrollIndicator={false}>
  {profileData.map((profile, index) => {
    return (
      <TouchableWithoutFeedback
        key={`${index}Profile`}
        onPress={() => setActive(index)}>
        <View style={styles.imageCircle}>
          <ImageCircle uri={profile.path} active={index === active} />
        </View>
      </TouchableWithoutFeedback>
    );
  })}
</ScrollView>

知道如何修复它/在我的组件中应用它吗？下面是相关的样式。

import { StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');
const styles = StyleSheet.create({
  scrollView: {
    height: 100,
  },
  scrollViewContainer: {
    paddingHorizontal: width * 0.5 - width * 0.1,
  },
  imageCircle: {
    width: width * 0.2,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
  },
});

export default styles;

标签： reactjstypescriptreact-native