React Native Display Modal из React Navigation Drawer - PullRequest
Новая
       72

React Native Display Modal из React Navigation Drawer

0 голосов
/ 06 августа 2020

У меня есть приложение, и я хотел бы, чтобы определенные маршруты навигации отображали модальные окна на текущей странице, когда пользователь щелкает их, в отличие от перехода на совершенно другую страницу. Мой существующий код: 

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>
    );
  }

Мои модальные окна отображаются должным образом, однако, похоже, они отображаются на новой, полностью пустой странице. Есть ли способ вызвать функцию из навигатора ящика, которая отображала бы модальный код?

Мой модальный код: 

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;

1 Ответ

1 голос
/ 21 августа 2020

Вам необходимо создать Root Stack Navigator, который будет включать в себя модальный компонент и ваш 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-navigation

...