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

Answer 2

您应该使用

在堆栈上添加导航

navigation.push(ScreenName.MEMBERPROFILE, { id: item.personId, });

一旦添加到堆栈中，id 将在同一屏幕上传递

import { useNavigationState } from '@react-navigation/native';
const routes = useNavigationState((state) => {
    return state.routes;
});

const paramsList = routes.map((e) => {
    return e?.params;
});
const lastID = paramsList[paramsList.length - 1];

每当我们按下同一屏幕时，您都会收到来自路线的所有参数。 现在您可以从堆栈中获取最后的 prams 值，传递给 API 并刷新 API

useEffect(() => {
    // Set navigation options
    dispatch(getPersonDirectoryRequest({ personId: lastID?.id }));
    // Update localId whenever route params change
}, [dispatch, id, navigation, lastID]);