React-Navigation Push 替换之前的屏幕数据

Question

我正在使用navigation.push 导航到具有不同参数的同一屏幕，它用最近推送的屏幕替换以前的所有屏幕数据

我的堆栈根目录

      <Stack.Screen
        name='ViewProduct'
        component={ViewProduct}
        options={({ navigation, route }) => ({
          headerTitle: props => <Text style={{fontSize:16,fontWeight:'bold'}}>Product Details</Text>,
        })}
        />

我的产品视图屏幕

<TouchableOpacity delayPressIn={500} onPress={() => props.navigation.dispatch(StackActions.push('ViewProduct',{"uid":item.uid}))}>
     <View>
           <Image style={styles.prodImage} source={{uri:IMG_URL+'/images'+item.image_base_path+item.image_variant+'/m/'+item.cover_image}}/>                      
      </View>
 </TouchableOpacity>

需要的方法

In navigation.push

product-1 >> product-2 >> product-3 >> product-4

In goback

product-1 << product-2 << product-3 << product-4

当前问题

In navigation.push

product-1 >> product-2 >> product-3 >> product-4

In goback

product-4 << product-4 << product-4 << product-4

Answer 1

您必须使用 navigation.navigate('yourscreen')。这会产生您预期的输出。如下所述使用。

=> this.props.navigation.navigate('FirstScreen); 
=> this.props.navigation.navigate('SecondScreen'); 
=> this.props.navigation.navigate('ThirdScreen');

不要使用任何 push() 或 dispatch() 方法。如果是基于类的导航，请使用以下方法。

例子：

this.props.navigation.navigate('DetailsS​​creen');

如果是功能组件，则从 @react-navigation/native 导入 useNavigation 道具。请看下面这个例子。

例子：

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function GoToButton({ screenName }) {
  const navigation = useNavigation();

  return (
    <Button
      title={`Go to ${screenName}`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}