React Native 在 Modal 中打开标签栏(使用 expo)

Question

我正在尝试在单击时将其中一个选项卡栏项目作为模态打开，我目前正在使用 expo。我已经读过这个： 如何使用 React 导航使 TabNavigator 按钮按下模态屏幕。但是，我仍在学习 React Native，老实说，我不确定如何使用世博会导航使用它。目前，我已经为每个屏幕使用"createStackNavigator"创建了一个堆栈导航器。最后，我导出了一个包含所有堆栈的底部选项卡导航器：

export default createBottomTabNavigator({ Tab1Stack， Tab2Stack， Tab3Stack， Tab4Stack });

我需要 Tab4 作为模态打开。有人可以帮助我吗？提前谢谢你！！

Answer 1

请注意，

这是为"反应导航"构建的："3.3.0"，因此您的里程因世博会和react-navigation的最新版本而异。

要在点击TabNavigator中的最后一个选项卡时显示模态，您需要将TabNavigator嵌套在StackNavigator中。

因此，我们可以设置如下内容：

#App.js

一个简单的App.js.

import React from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
constructor (props) {
super(props);
this.state = {
};
}
render () {
return (
<AppContainer />
);
}
}

#MainNavigation.js

此文件包含两个导航器。一个TabNavigator和一个StackNavigator.TabNavigator嵌套在StackNavigator内。

为了能够显示ModalScreen我们必须覆盖 TabNavigatorconfig内的defaultNavigationOptions内的tabBarOnPress函数。

我们也需要检查navigation.state.key以查看我们正在导航的位置。如果我们要Tab3我们可以拦截呼叫并导航到ModalScreen。否则，我们使用defaultHandler并转到点击的选项卡。

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import Screen3 from './Screen3';
import ModalScreen from './ModalScreen';
import { createBottomTabNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
const screens = {
Tab1: {
screen: Screen1
},
Tab2: {
screen: Screen2
},
Tab3: {
screen: Screen3
}
};
const config = {
headerMode: 'none',
initialRouteName: 'Tab1',
defaultNavigationOptions: {
tabBarOnPress: (data) => {
// this is where the magic happens
const { navigation, defaultHandler } = data;
// we check to see if the navigation key is going to be on Tab3
if (navigation.state.key === 'Tab3') {
// if it is we show the ModalScreen by navigating to it
navigation.navigate('ModalScreen');
} else {
// otherwise we call the defaultHandler and navigate to the tab we pressed
defaultHandler(navigation.state.key);
}
}
}
};
const TabNavigator = createBottomTabNavigator(screens, config);
const stackScreens = {
Tabs: {
screen: TabNavigator
},
ModalScreen: {
screen: ModalScreen
}
};
//we need to set the mode to be modal
const stackConfig = {
headerMode: 'none',
initialRouteName: 'Tabs',
mode: 'modal'
};
const MainNavigator = createStackNavigator(stackScreens, stackConfig);
export default createAppContainer(MainNavigator);

#Screen.js

每个选项卡的简单屏幕

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
export default class Screen extends React.Component {
render () {
return (
<View style={styles.container}>
<Text>Tab Screen</Text>
</View>
);
}
}

#ModalScreen

此屏幕是点击第三个屏幕的选项卡时将出现的模式。 由于它是StackNavigator，上面定义，因此可以访问导航道具。我们设置了一个简单的按钮，当按下呼叫时this.props.navigation.goBack()这将关闭模态。

import React from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
export default class Screen extends React.Component {
render () {
return (
<View style={styles.container}>
<Text>Modal Screen</Text>
<Button
title={'close modal'}
onPress={() => this.props.navigation.goBack()}
/>
</View>
);
}
}

这是一个可以工作的零食，https://snack.expo.io/@andypandy/show-modal-on-tab-press，希望它会告诉你如何设置它。