React Navigation底部选项卡导航器加模式屏幕

Question

我有以下代码来使用React Native Navigation v6.x:创建一个选项卡

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}

HomeScreen有一个按钮，该按钮应称为模式屏幕。

我的问题是：我该如何在我的导航器中添加这个模态屏幕来从HomeScreen调用它，这个调用代码是如何的？

谢谢！

Answer 1

您不需要在导航器中包含模态就可以从主页打开它。

你可以这样做：

const HomeScreen = () => {
const [modalVisible, setModalVisible] = useState(false);
function _myModal() {
return(
<Modal
animationType="slide"
visible={modalVisible}
onRequestClose={() => {setModalVisible(false)}}
>
<Text>Hello, I am a modal!</Text>
</Modal>
)
}
// your code
return (
<View>
{/*your code*/}
<Pressable
onPress={() => setModalVisible(true)}
>
<Text>Show Modal</Text>
</Pressable>
{_myModal()}
</View>
);
};

React Native文档中也有一个类组件的示例，以防您正在使用这些组件，以及更多应该对您有所帮助的信息。

Answer 2

如果您想从主页打开模式屏幕，那么您应该创建一个主屏幕堆栈导航器，并在该堆栈中添加两个屏幕(主屏幕和模式屏幕(，然后按下按钮导航到该模式。

选项卡导航器(根导航MyTabs(

...
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeStack} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}

堆栈导航器(HomeStack(

cosnt Stack = createStackNavigator();
function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen name="HomeScreen" component={HomeScreen} />
<Stack.Screen name="ModalScreen" component={ModalScreen}
options={{ presentation: 'modal' }} />
</Stack.Navigator>
);
}

主屏幕

export default function HomeScreen({navigation}) {
return (
<View>
<TouchableOpacity onPress={() => navigation.navigate('ModalScreen'}>
<Text>Open ModalScreen</Text>
</TouchableOpacity>
</View>
)
}