如何使用 React Navigation 让 TabNavigator 按钮推送模态屏幕
使用 React Navigation 选项卡导航器
https://reactnavigation.org/docs/navigators/tab
如何让其中一个选项卡按钮将屏幕向上推为全屏模态?我看到堆栈导航器有一个
mode=modal
选项。如何在单击
TakePhoto
选项卡按钮时使用该模式?当前单击它仍会在底部显示选项卡栏。
const MyApp = TabNavigator({
Home: {
screen: MyHomeScreen,
},
TakePhoto: {
screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal?
},
});
实际上,
react-navigation
中不支持将呈现方式从
default
动态更改为
modal
(请参阅
此处
关于此问题的讨论)。我遇到了同样的问题,并通过使用最顶层的
StackNavigator
解决了该问题,其中将
headerMode
设置为
none
并将
mode
设置为
modal
:
const MainTabNavigator = TabNavigator(
{
Tab1Home: { screen: Tab1Screen },
Tab2Home: { screen: Tab2Screen }
}
);
const LoginRegisterStackNavigator = StackNavigator({
Login: { screen: LoginScreen }
});
const ModalStackNavigator = StackNavigator({
MainTabNavigator: { screen: MainTabNavigator },
LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator }
}, {
headerMode: 'none',
mode: 'modal'
});
这使我可以在
Tab1Screen
和
Tab2Screen
中执行以下操作(使用 redux),以从我想要的任何位置调出模态视图:
this.props.navigation.navigate('LoginScreenStackNavigator');
不确定这对您是否仍然有用,但我已经设法找到实现此目的的方法。
因此,我已设法通过使用 tabNavigatorConifg 中的 tabBarComponent 使其工作,您可以停止根据索引进行导航的选项卡导航。
tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
<TabBarBottom
{...props}
jumpToIndex={index => {
if (index === 2) {
navigation.navigate('camera')
}
else {
jumpToIndex(index)
}
}}
/>
)
完成此操作后,我在选项卡视图顶部模态显示视图的方法是将 tabnavigator 放在 stacknavigatior 中,然后只需导航到 stacknavigator 内的新屏幕即可。
react-navigation
的 bottomTabNavigator 有一个
tabBarOnPress
导航选项,您可以使用它来覆盖选项卡按下:
https://reactnavigation.org/docs/en/bottom-tab-navigator.html#tabbaronpress
const AppContainer = createStackNavigator(
{
default: createBottomTabNavigator(
{
TAB_0: Stack0,
TAB_1: Stack1,
TAB_2: Stack2,
TAB_3: View // plain rn-view, or any old unused screen
},
{
defaultNavigationOptions: {
// other tab navigation options...
tabBarOnPress: ({ navigation, defaultHandler }) => {
if (navigation.state.key === 'TAB_3') {
navigation.navigate('tabToOpenAsModal');
} else {
defaultHandler();
}
}
}
}
),
tabToOpenAsModal: {
screen: TabToOpenAsModalScreen
}
},
{
mode: 'modal',
headerMode: 'none'
}
);
如果您将选项卡导航器嵌套在带有模态框的堆栈导航器中,则可以在按下选项卡栏按钮时打开它。由于打开的是模态框而不是选项卡,因此当模态框关闭时,应用将返回到按下模态选项卡之前可见的屏幕。