如何在 ReactNavigation 中为标题后退箭头提供自定义导航?我希望标题中的后退箭头导航到我定义的屏幕而不是前一个屏幕。
谢谢。
如何在 ReactNavigation 中为标题后退箭头提供自定义导航?我希望标题中的后退箭头导航到我定义的屏幕而不是前一个屏幕。
谢谢。
你可以尝试两件事:
a)headerMode: 'none'
在你的sub-StackRouters
而不是你的根路由器中使用(命名为 RouterComponent)。理想情况下,您不必再做任何事情,并且 的标头sub-StackRouters
将显示在根路由器的标头中。我想我记得一些类似的东西对我有用,但我有一段时间没有测试过它,我认为它不太可能仍然像这样工作,但你仍然可以测试。
b) 这就是我目前在不同情况下使用的。要手动包含后退按钮:
import { HeaderBackButton } from 'react-navigation';
const navigationOptions = ({ navigation }) => ({
headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />,
})
const RouterComponent = StackNavigator({
Tabs: {
screen: Tabs
},
Profile: {
screen: ProfileStack,
navigationOptions
}
},{
mode: 'modal',
headerMode: 'none',
});
如果上述解决方案不起作用,
尝试将 navigationOptions 直接添加到 ProfileStack 定义中。
const ProfileStack = StackNavigator({
ProfileHome: {
screen: ProfileHome,
navigationOptions: ({navigation}) => ({ //don't forget parentheses around the object notation
title: 'Profile',
headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />
})
},
ProfileEdit: { screen: ProfileEdit }
}
嗨,谁使用过 react-navigation 5.x,您可能无法使用navigationOptions
. 该选项已替换为options
。
说你在 screen -1 并导航到 screen-2,然后导航到 screen-3。默认情况下,使用 react-navigation 您可以从 screen-3 导航到 screen-2。但是,如果您想要自定义导航,即,如果您想从 screen-3 导航到 screen-1,请从上面的示例中说出来。
如果您想保留后退按钮的视图并且只覆盖 onPress 方法,您可以import { HeaderBackButton } from '@react-navigation/stack'
将该组件分配给该headerLeft
选项。
例子:
<RootStack.Screen
name="dashboard"
component={Dashboard}
options={({navigation, route}) => ({
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => navigation.navigate('Home')}
/>
),
})}
/>
在上面的示例中,单击仪表板屏幕中的后退按钮会将您带到主屏幕。
享受和感谢-Sukshith