时间戳

首页 > 解决方案 > 如何使用绘图导航器

reactjs - 如何使用绘图导航器

问题描述

我为我的 Startup 创建了一个应用程序，我需要使用堆栈和绘图导航器，我已经开发了所有堆栈但是绘图只是没有出现检查我的代码

 import React from 'react';
 import MapView from 'react-native-maps';
 import{ View, ScrollView, Text, StyleSheet, Dimensions} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native'
 import {createStackNavigator}  from '@react-navigation/stack' 
 import {createDrawerNavigator} from '@react-navigation/drawer'
 import { render } from 'react-dom';
 import  Home from './screens/Mainpage'
 import  Dermatologistas from './screens/Dermatologistas'
 import  Hospitais from './screens/Hospitais'


 import * as firebase from 'firebase'
 import { firebaseConfig } from './firebaseconfig';
 import react from 'react';
 import Login from './screens/Login';
 firebase.initializeApp(firebaseConfig)






  const  width = Dimensions.get('window').width
  const heigth = Dimensions.get('window').height

在这里我创建了一个 Stack const 和 Drawer const

 const Drawer = createDrawerNavigator()
 const Stack = createStackNavigator()

在这里我做了绘制功能

 function Draw() {
   return(
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={Home}/>
      <Drawer.Screen name="Login" component={Login}/>
    </Drawer.Navigator> 

   );
 }

在这里我导出应用程序

  export default function App(){
     return (
  
       <NavigationContainer initialRouteName="Home">
           <Stack.Navigator>
      
           <Stack.Screen name="Home" component={Home}/>
           <Stack.Screen name="Dermatologistas" component={Dermatologistas}/>
           <Stack.Screen name="Hospitais" component={Hospitais}/>
           <Stack.Screen name="Draw" component={Draw}/>
      
         </Stack.Navigator>
   
       </NavigationContainer>
      
      );
     }

标签： reactjsreact-nativeexpo

解决方案

你可以做的是

renderHomeNavigator = () => {

    <Stack.Navigator>
      
           <Stack.Screen name="Home" component={Home}/>
           <Stack.Screen name="Dermatologistas" component={Dermatologistas}/>
           <Stack.Screen name="Hospitais" component={Hospitais}/>      
    </Stack.Navigator>
}



<NavigationContainer>

    <Stack.Navigator>

            <Drawer.Navigator>
                <Drawer.Screen name="Home" component={this.renderHomeNavigator}/>
            </Drawer.Navigator> 

            <Stack.Screen
              name="Login"
              component={Login}
            />
   </Stack.Navigator>          
   

</NavigationContainer>

推荐阅读