如何为react-native-reanimated-carousel自动播放设置单屏停留延迟？

我正在使用react-native-reanimated-carousel组件，需要延长每个渲染项的停留时间后再滚动至下一项（设置自动播放延迟）。当前每个项的显示时长约为1秒，希望将其延长至3秒左右，预期效果如下：

现有实现代码：

<Carousel
  loop
  width={width}
  data={data}
  scrollAnimationDuration={1000}
  autoPlay={true}
  renderItem={({item, index}) => {
    const {title, desc, image: Image, style} = item;
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
        }}>
        <Image height={height / 3} style={style} />
        <Text
          style={[
            styles.textCenter,
            styles.whiteColor,
            {fontSize: 24, marginTop: 20, fontWeight: '900'},
          ]}>
          {title}
        </Text>
        <Text
          style={[
            styles.textCenter,
            styles.whiteColor,
            styles.font12,
            styles.p20,
            {maxWidth: 350, alignSelf: 'center', lineHeight: 18},
          ]}>
          {desc}
        </Text>
      </View>
    );
  }}
/>

解决方案 #

react-native-reanimated-carousel提供了autoPlayInterval属性，用于指定自动播放时每一项的停留间隔（单位：毫秒）。只需在组件中添加该属性并设置为3000（对应3秒）即可实现需求。

修改后的完整代码：

<Carousel
  loop
  width={width}
  data={data}
  scrollAnimationDuration={1000}
  autoPlay={true}
  autoPlayInterval={3000} // 添加这一行，设置3秒停留时间
  renderItem={({item, index}) => {
    const {title, desc, image: Image, style} = item;
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
        }}>
        <Image height={height / 3} style={style} />
        <Text
          style={[
            styles.textCenter,
            styles.whiteColor,
            {fontSize: 24, marginTop: 20, fontWeight: '900'},
          ]}>
          {title}
        </Text>
        <Text
          style={[
            styles.textCenter,
            styles.whiteColor,
            styles.font12,
            styles.p20,
            {maxWidth: 350, alignSelf: 'center', lineHeight: 18},
          ]}>
          {desc}
        </Text>
      </View>
    );
  }}
/>

内容的提问来源于stack exchange，提问作者Reypak_UG