来自 React Navigation Drawer 的 React Native Display Modal [英] React Native Display Modal from React Navigation Drawer

问题描述

我有一个应用程序，我希望在用户单击某些导航路线时在当前页面上显示模式，而不是导航到完全不同的页面.我现有的代码是:

I have an application and I would like to have certain navigation routes display modals over the current page when the user clicks them as opposed to navigating to an entirely different page. My existing code is:

const DrawerNavigator = () => {
    return (
      <Drawer.Navigator>
        <Drawer.Screen name="My Porfolio" component={Portfolio} />
        <Drawer.Screen name="Account" component={Account} />
        <Drawer.Screen name="NBA" component = {NBALobby} />
        <Drawer.Screen name="NFL" component = {NFLLobby} />
        <Drawer.Screen name="How To Play" component = {HowToPlayModal} />
      </Drawer.Navigator>
    );
  }

我的模式按预期显示，但它似乎显示在一个新的、完全空白的页面上.有没有办法从 Drawer Navigator 中调用一个函数来显示模态?

My modal displays as expected, however it seems to display over a new, completely blank page. Is there a way to maybe call a function from the Drawer Navigator that would display the modal?

我的模态代码是:

import React, { Component, useState } from 'react';
import {Text, TextInput, View, TouchableOpacity} from 'react-native';
import Modal from 'react-native-modal';

import {styles} from '../styles/signUpIn';
    
const HowToPlayModal = () => {
    
    return(
        <Modal isVisible = {true}>
                <View style={styles.container2}>
                <View style={{flexDirection: 'row'}}>
                        <Text style={styles.title}>How To Play</Text>
                        <View style= {{flex:1, alignItems: 'flex-end'}}>
                                <Text style={[styles.fieldTitle, {marginLeft: 0}]}>Remember?</Text>
                                <Text style={styles.accent} >Sign In</Text>
                        </View>      
                </View>
                </View>
        </Modal>
        );
}
    
export default HowToPlayModal;

推荐答案

您需要创建一个包含 Modal 组件和 Drawer Navigator 的 Root Stack Navigator.

You need to create a Root Stack Navigator that will include the Modal component and your Drawer Navigator.

const Drawer = createDrawerNavigator();
const RootStack = createStackNavigator();

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="My Porfolio" component={Portfolio} />
            <Drawer.Screen name="Account" component={Account} />
            <Drawer.Screen name="NBA" component = {NBALobby} />
            <Drawer.Screen name="NFL" component = {NFLLobby} />
        </Drawer.Navigator>
    );
};

const RootStackScreen = () => {
  return (
    <NavigationContainer>
        <RootStack.Navigator mode="modal">
            <RootStack.Screen
                name="Main"
                component={DrawerNavigator}
                options={{ headerShown: false }}
            />
            <RootStack.Screen name="HowToPlayModal" component={HowToPlayModal} />
        </RootStack.Navigator>
    </NavigationContainer>
  );
}

完整的解释可以在这里找到 https://reactnavigation.org/docs/drawer-based-导航

Complete explanation can be found here https://reactnavigation.org/docs/drawer-based-navigation

这篇关于来自 React Navigation Drawer 的 React Native Display Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！