Использование стека и нижнего навигатора вместе реагируют на нативный - PullRequest
Новая
       8

Использование стека и нижнего навигатора вместе реагируют на нативный

0 голосов
/ 07 апреля 2020

Я пытаюсь добавить навигацию по ящикам на главный экран. Как я могу это сделать? Вот мой код. 

     class Navigation extends React.Component {
      render() {
        return (
          <NavigationContainer>
            <StatusBar barStyle="light-content" />
            <Stack.Navigator>
              <Stack.Screen name="Home" component={Home} options={{ title: this.state.name, }} />
              <Stack.Screen name="DrawerScreen" options={{ title: 'DrawerScreen' }} />
            </Stack.Navigator>
          </NavigationContainer>
        );
      }
    }

Как я могу использовать DrawerScreen в моем классе навигации? Я попробовал ЭТО ^, но он выдает ошибку, говоря, что не могу найти компонент для DrawerScreen. 

function DrawerScreen() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

1 Ответ

0 голосов
/ 07 апреля 2020

Вы можете сделать что-то вроде этого: 

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import { View, Text, StyleSheet,Button, SafeAreaView, ScrollView, Image } from "react-native";
import Load from './components/Load';
import Home from './components/Homescreen'
import SignIn from './components/SignIn'
import SignUp from './components/SignOut'

const MainDrawer = createDrawerNavigator({
  SignUp:SignUp,
},
);
const App = createStackNavigator({
  Load: {
    screen: Load,
    navigationOptions: {
      headerShown:false
    },
  },
  Home: {
    screen: Home,
    navigationOptions: {
      headerShown:false,
    },
  },
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      headerShown:false,
    },
  },
  SignUp: {
    screen: MainDrawer,
    navigationOptions: {
      headerShown:false,
    },
  },
});

export default createAppContainer(App);

Надеюсь, это поможет!

...