Как перестать реагировать на собственный плоский список от возврата к начальному элементу во время навигации

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
        )}
      />
    );

AnimatedCard.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 кто меняет экран. Вместо этого используйте pu sh, чтобы добавить экран вверху ваших стопок.

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