React-导航推送将替换以前的屏幕数据

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('DetailsScreen')；

如果是功能性组件，则从@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)}
    />
  );
}

​