React-native-snap-carousel 不能根据最后的索引状态正确显示图像

Question

我是 RC 的新手，我正面临 react-native-snap-carousel 的问题。我有以下代码：

import React, { useState } from 'react';
import { Image, View, StyleSheet, TouchableWithoutFeedback, StatusBar, SafeAreaView, Text, TouchableHighlight } from 'react-native';
import Carousel from 'react-native-snap-carousel';
import { GestureHandlerRootView } from "react-native-gesture-handler";

import Constants from 'expo-constants';

export default function App() {

  const [useData1Bool, setUseData1Bool] = useState(true);

  const data1 = [
       {
         img: require("./assets/pic1.png"),
       },
       {
         img: require("./assets/pic2.png")
       }
     ];

  const data2 = [
       {
         img: require("./assets/pic3.png"),
       },
     ];

  const [index, setIndex] = React.useState(0);
  const isCarousel = React.useRef(null);

  const data = useData1Bool ? data1 : data2;

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="light-content"/>
      <View style={styles.mainView}>
      <GestureHandlerRootView>
        <Carousel 
            layout={"default"}
            data={data}
            sliderWidth={100}
            itemWidth={100}
            renderItem={({ item, index }) => {
              return (
                <TouchableWithoutFeedback>
                  <Image 
                    style={{ width: 100, height: 100 }}
                    source={item.img}
                  />
                </TouchableWithoutFeedback>
              );
            }}
            onSnapToItem={(index) => setIndex(index)}
            ref={isCarousel}
        />
        <Text></Text>
        <Text></Text>
        <TouchableHighlight onPress={() => setUseData1Bool(true)}>
          <Text>Use data1 carousel</Text>
        </TouchableHighlight>
        <Text></Text>
        <Text></Text>
        <TouchableHighlight onPress={() => setUseData1Bool(false)}>
          <Text>Use data2 carousel</Text>
        </TouchableHighlight>
        </GestureHandlerRootView>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center',
    },
    mainView: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
});

package.json:
{
  "dependencies": {
    "expo-constants": "~14.0.2",
    "@expo/vector-icons": "^13.0.0",
    "react-native-paper": "4.9.2",
    "react-native-snap-carousel": "4.0.0-beta.6",
    "react-native-gesture-handler": "~2.8.0"
  }
}

可在以下网址获得：https://snack.expo.dev/@ndefeis/carousel?platform=android

我希望能够在不同的图像集之间切换（在本例中为 data1 和 data2）。

如果我在捕捉到 data1[0] 的图像后通过单击“使用 data2 轮播”选项切换到 data2，它工作正常（显示 data2[0] 的图像）。

但是，如果我在捕捉到 data1[1] 上的图像后通过单击“使用 data2 轮播”选项切换到 data2，它无法正常工作（不显示 data2[0] 上的图像）。在这种情况下，似乎有正确的图像，但我需要单击它才能显示它。

拜托，我做错了什么？

我希望能够在不同的图像集之间切换（在本例中为 data1 和 data2）。

如果我在捕捉到 data1[0] 的图像后通过单击“使用 data2 轮播”选项切换到 data2，它工作正常（显示 data2[0] 的图像）。

但是，如果我在捕捉到 data1[1] 上的图像后通过单击“使用 data2 轮播”选项切换到 data2，它无法正常工作（不显示 data2[0] 上的图像）。在这种情况下，似乎有正确的图像，但我需要单击它才能显示它。

拜托，我做错了什么？