如何在React navigation 5堆栈导航器中按back按钮导航到屏幕
如何在React navigation 5堆栈导航器中按back按钮导航到屏幕
提问于 2020-07-13 20:14:02
有许多类似的问题已经得到了回答，但没有一个使用最新的反应导航版本。我想在按back按钮时从“文档”屏幕转到“主页”屏幕。这就是我所尝试的，但它不起作用。
<NavigationContainer>
<Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown : false }}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Camera" component={CameraScreen} />
<Stack.Screen name="Document" component={Document} options={{
headerLeft: (props) => (<HeaderBackButton {...props} onPress={() => props.navigation.navigate("Home")}/>)
}} />
</Stack.Navigator>
</NavigationContainer>编辑以获得更多澄清:我的应用程序从'Home‘开始，然后转到'Camera’，然后转到'Document‘。现在，我不想回到‘相机’，一旦我在‘文档’，而不是直接回到‘主页’，当我按下手机的后退按钮。根据文档，这是如何覆盖后退按钮的。
<Screen
name="Home"
component={HomeScreen}
options={{
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
// Do something
}}
/>
),}}/>；但我不知道如何使用上面的代码转到“主页”。所以我搜索了类似的问题，其中大多数都有navigationOptions和其他东西。我试着按照下面的问题回答。
import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
return{
headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
}}所以，是的，即使我使用console.log，后退按钮也不会响应
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-07-15 19:11:34
我设法实现了我所需要的。我不得不重写“文档”中的后退按钮。
useFocusEffect(
useCallback(() => {
const onBackPress = () => {
navigation.pop(2); // remove two screens i.e. Document and Camera
return true // disable normal behaviour
};
BackHandler.addEventListener('hardwareBackPress', onBackPress); // detect back button press
return () =>
BackHandler.removeEventListener('hardwareBackPress');
}, [])
);Stack Overflow用户
发布于 2020-10-24 04:16:29
您可以使用导航'beforeRemove‘事件自定义后退按钮行为，该事件在卸载屏幕之前触发。
useEffect(() => {
const unsubscribe = navigation.addListener('beforeRemove', e => {
e.preventDefault(); // Prevent default action
unsubscribe() // Unsubscribe the event on first call to prevent infinite loop
navigation.navigate('Home') // Navigate to your desired screen
});
}, [])这种方法的积极之处在于，它可以触发任何类型的后退导航，无论是应用程序内的后退按钮还是设备上的后退按钮/手势。
Stack Overflow用户
发布于 2020-07-13 20:25:50
你试过CommonActions.reset吗？
来自doc的类似以下内容：
import { CommonActions } from '@react-navigation/native';
// when you want to navigate to the Documents page, instead of doing
navigation.navigate({routeName: 'Documents'});
// you can try
navigation.dispatch(
CommonActions.reset({
index: 1,
routes: [
{ name: 'Home' },
{
name: 'Documents',
params: { name: 'abc' },
},
],
})
);因此，当您从Documents返回时，您将转到堆栈中的前一个屏幕：Home。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62875629
复制相关文章
相似问题
腾讯云开发者
