react-native - 图片库使用 FlatList 和共享元素 [React-Native]

Question

我创建了一个包含共享元素图像的平面列表，通过点击它可以导航到一个新屏幕，这里有一个所有图像的列表，就像以前一样，但是当我尝试在不同的共享元素索引上关闭屏幕时. 这是我要清除的项目的视频：

这是我的代码：https ://drive.google.com/file/d/1BmpgAq30SedvFN1nPrPzx519pYhJjhnD/view?usp=sharing

// HomeScreen.js

const HomeScreen = ({ navigation, route }) => {
  const ref = useRef();

  useEffect(() => {
    if (!route.params) return;

    const index = route.params.selectedIndex;
    ref.current.scrollToOffset({ offset: index * width });
  }, [route.params]);

  const onItemPress = (item, index) => {
    navigation.navigate("Detail", { items, item, index });
  };

  const getItemLayout = (data, index) => {
    return {
      length: width,
      offset: width * index,
      index,
    };
  };

  return (
    <View style={styles.container}>
      <View style={styles.listContainer}>
        <FlatList
          ref={ref}
          horizontal
          pagingEnabled
          data={items}
          getItemLayout={getItemLayout}
          initialNumToRender={30}
          initialScrollIndex={3}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item, index }) => (
            <Cell {...{ item, index, onItemPress }} />
          )}
        />
      </View>
    </View>
  );
};

// DetailScreen.js

const DetailScreen = ({ route, navigation }) => {
  const { items, index } = route.params;
  const [selectedIndex, setSelectedIndex] = useState(0);

  const onDismiss = () => {
    navigation.navigate("Home", { selectedIndex, item: items[selectedIndex] });
  };

  const onMomentumScrollEnd = ({
    nativeEvent: {
      contentOffset: { x },
    },
  }) => {
    if (x < 0) return;
    const index = Math.floor(x / width);
    setSelectedIndex(index);
  };


  return (
    <View>
      <View style={styles.scrollContainer}>
        <ScrollView
          horizontal
          pagingEnabled
          scrollEventThrottle={1}
          contentOffset={{ x: width * index }}
          onMomentumScrollEnd={onMomentumScrollEnd}
        >
          {items.map((item) => (
            <PinchImage
              imageSrc={item.source}
              {...{ item, navigation }}
              key={item.id}
            />
          ))}
        </ScrollView>
      </View>
    </View>
  );
};

DetailScreen.sharedElements = (route) => {
  const { item } = route.params;
  return [{ id: `item.${item.id}.image`, animation: "move", resize: "clip" }];
};

标签： react-nativeshared-element-transition