OnbackPrees 到 return 主页总是在反应堆栈导航中

Question

我在 React Native 中做导航，所有后退箭头或后退按 return 到初始路线。最后一个选项是列出 onBackPreessed 事件并将调用传递给 init 路由，它是 home。我希望他们将成为允许屏幕 return 在堆栈导航中初始化屏幕的道具

发生了什么

在家：转到 详细信息 然后转到 A 按 A 中的后退箭头，它 return 返回 详细信息

需要行动

在家：转到 详细信息 然后转到 A 按 A return 返回 home 而不是 details

我试的代码

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to A"
        onPress={() => navigation.navigate('A')}
      />

    </View>
  );
}
function A({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>AAAAAAAAAAAAAAAAAAA Screen</Text>


    </View>
  );
}
const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home" detachInactiveScreens={true}
        detachPreviousScreen={true}>
        <Stack.Screen name="Home" component={HomeScreen} />

        <Stack.Group screenOptions={{ presentation: 'modal' }}>
          <Stack.Screen name="Details" component={DetailsScreen}
            options={{ presentation: 'transparentModal' }}
          />
          <Stack.Screen name="A" component={A} />
        </Stack.Group>
      </Stack.Navigator>


    </NavigationContainer>
  );
}

export default App;

Answer 1

你可以通过将“key”传递给“navigate”来做到这一点更多信息（来源）： https://reactnavigation.org/docs/navigation-prop/

https://reactnavigation.org/docs/navigation-prop/#going-back-from-a-specific-screen

navigation.navigate({ name: SCREEN, key: SCREEN_KEY_A });
navigation.navigate({ name: SCREEN, key: SCREEN_KEY_B });
navigation.navigate({ name: SCREEN, key: SCREEN_KEY_C });
navigation.navigate({ name: SCREEN, key: SCREEN_KEY_D });

navigation.navigate({ key: SCREEN_KEY_A }); // will go to screen A FROM screen D

Answer 2

我想你可以在屏幕 A 上使用 BackHandler。

所以您应该在屏幕 A 中监听 BackHandler，并在触发时导航到主屏幕。

您的屏幕 A 应如下所示：

  import { BackHandler } from 'react-native';

  function handleBackPressHandler() {
    navigation.navigate('HomeScreen');
    return true;
  }

  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', handleBackPressHandler);

    return () => {
      BackHandler.removeEventListener('hardwareBackPress', handleBackPressHandler);
    };
  }, []);

Answer 3

React Navigation 的默认行为仅此而已，它会将您带到上次访问的堆栈，但如果您想更新它，您可以使用这行代码：

useFocusEffect( //imported from @react-navigation/native-stack
React.useCallback(() => {
  const onBackPress = () => {
    navigation.navigate('InitialRouteName');
  };

  BackHandler.addEventListener('hardwareBackPress', onBackPress);

  return () =>
    BackHandler.removeEventListener('hardwareBackPress', onBackPress);
}, [])

);

作为参考，你可以看看这个 - https://reactnavigation.org/docs/custom-android-back-button-handling/

Answer 4

请试试这个，

从'react-native'导入{BackHandler}；

  useEffect(() => {
    const backAction = () => {
      navigation.navigate('intialRouteName');
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    );

    return () => backHandler.remove();
  }, []);

OnbackPrees 到 return 主页总是在反应堆栈导航中

OnbackPrees to return home always in react stack navigation

javascript

react-native

react-navigation-stack