React Native 导航重置不起作用

Question

我的应用程序中有两个堆栈

• 选项卡导航器（主堆栈）
• Stack Navigator（应用程序堆栈）

堆栈导航器元素

• 主屏幕
• 详细画面
• 登录屏幕

标签导航器元素

• 主屏幕（堆栈导航器）
• 经济新闻
• 政治新闻
• 社会新闻

我想从经济新闻、政治新闻和社会新闻转到详细信息屏幕，因为我在这些屏幕中呈现所有新闻，当用户单击任何新的时，必须转到单击的新的详细信息屏幕。我用了 navigate('Home', {screen: 'Detail', params: {id: new.ID}}); 但它总是呈现之前的新细节。

我也试过了

navigation.dispatch(
  CommonActions.reset({
    routes: [
      {
        name: 'Home',
      },
      {
        name: 'Detail',
        params: {
          id: new.ID,
        },
      },
    ],
  }),
);

但它仍然不起作用我需要帮助解决这个问题我尝试了很多东西但总是呈现以前的屏幕细节。

Answer 1

这是我的主页堆栈导航

<Stack.Navigator
  initialRouteName="Home"
  headerMode="none"
  transitionConfig={transitionConfig}
>
  <Stack.Screen
    name="Detail"
    component={DetailScreen}
    initialParams={props.route.params}
  />
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
  <Stack.Screen name="Login" component={LoginPage} />
  <Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>

那是我的主要标签导航

     <Tab.Navigator
        tabBar={props => <Footer {...props} />}
        transitionConfig={transitionConfig}
      >
        <Tab.Screen name="Home" component={StackNavigator} />
        <Tab.Screen name="EconomyNews" component={ContentScreen} />
        <Tab.Screen name="PoliticNews" component={ContentScreen} />
        <Tab.Screen name="SocialNews" component={ContentScreen} />
      </Tab.Navigator>

我想从 EconomyNews、PoliticNews 或 SocialNews 屏幕转到带有新值（如 id）的详细信息屏幕，但它总是呈现前一个屏幕

Answer 2

很难遵循您的代码，但我没有看到您在 Detail 组件中使用了 id，因此您不可能拥有其他数据。 你的情况不需要备忘录...

const Detail = props => { 
const [content, setContent] = useState(null); 
const dispatch = useDispatch(); 
const contentProps = useSelector(state => state.contentReducer); 
const { loading, error, detail } = contentProps; 
const URL = `URL/${props.navigation?.route?.params?.id}`
useEffect(() => {
function fetchData() {
dispatch(getDetail({endpoint: URL}));}
fetchData();
}, [dispatch, props.navigation?.route?.params?.id]);
return (<Container><Image source={{uri:'URL'}}/><View style={styles.content_container}><Title>{content.title}</Title><OverView style={styles.content}>{content.overview}</OverView></Container>);};

Answer 3

我在 fetch 函数中使用 url 中的 id。我用它从服务中获取数据，这就是为什么我没有写出确切的 url。主要目标是通过重置打开详细信息屏幕。我今天也尝试了另一种方法，但没有奏效；

import {useNavigation} from '@react-navigation/native';
const Content = (props => {
   const _nav = useNavigation();
   const goToRoute = () => {
      _nav.reset({
         index: 1,
         routes: [
         {
           name: 'Home',
         },
         {
           name: 'Detail',
           params: {
             id: item.ID,
           },
         },
      ],
   });
 };
});