如何在导航时阻止本机平面列表返回到起始项目

Question

我正在通过向平面列表添加一些动画来构建一个应用程序。但是当我导航到详细信息屏幕时，我遇到了一个问题，上一页转到了开始项目。我希望它停留在用户之前停止的项目上。 这就是我的代码的样子。

Home.tsx

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
return (
      <AnimatedFlatList
        scrollEventThrottle={16}
        bounces={false}
        {...{onScroll}}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.4}
        keyExtractor={(item, index) => item.id}
        data={photos}
        renderItem={({index, item}) => (
          <AnimatedCard {...{item, index, y, navigation}} />   < --- Here is the animated card
        )}
      />
    );

动画卡.tsx

<TouchableWithoutFeedback
      onPress={() => {
        navigation.navigate('Detail', {
          id: item.id,
        });
      }}>
      <Animated.View
        style={[styles.card, {opacity, transform: [{translateY}, {scale}]}]}>
        <Card
          borderRadius="xl"
          variant="elevated"
          style={{width: width - 50, height: height - 250}}>
          <Image style={styles.imageSize} source={{uri: item.src.large}} />
        </Card>
      </Animated.View>
    </TouchableWithoutFeedback>

Answer 1

因为你正在使用navigation.navigate谁改变屏幕。相反，使用推送将屏幕添加到堆栈的顶部。

onPress={() => {
   navigation.push('Detail', {
     id: item.id,
   });
}}