onPress={() => this.props.navigation.openDrawer} 未在 react-native 中顯示抽屜導航

Question

下面我添加了所有文件代碼，我的問題是當我從 Login.js 按下登錄按鈕時，它會轉到 Home.js，我需要在 Drawer.js 中創建的 DrawerNavigation 但是當我使用 onPress={() => this.props.navigation.openDrawer} 里面 Home.js 抽屜沒有打開誰能幫我請看下面的鏈接查看 output

Login.js Output 圖像

Home.js Output 圖像

navigation
   -index.js
   -drawer.js
screen
   -Login.js
   -Home.js
   -Signup.js
App.js

這是導航/index.js

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Login from "../screens/Login";
import Home from "../screens/Home";
import Signup from "../screens/Signup";
import { theme } from "../constants";

const screens = createStackNavigator(
  {
    Login,
    Home,
    Signup,
    
  },

  {
    defaultNavigationOptions: {
     
  }
);

export default createAppContainer(screens);

這是screens/Login.js

export default class Login extends Component {
  
  render() {
    const { navigation } = this.props;
    return (
           <Button
              style={styles.signin}
              onPress={() => navigation.navigate("Home")}>
              <Text style={styles.buttontext}>Login</Text>
            </Button>

    );
  }
}

這是抽屜.js

import { createDrawerNavigator } from "react-navigation-drawer";

import {
  ProfileScreen,
  EducationalScreen,
  ExperienceScreen,
  MessageScreen,
  ActivityScreen,
  LogoutScreen,
} from "./Screen";

import SideBar from "../components/SideBar";

const DrawerNavigator = createDrawerNavigator(
  {
    ProfileScreen,
    EducationalScreen,
    ExperienceScreen,
    MessageScreen,
    ActivityScreen,
    LogoutScreen,
  },

  {
    contentComponent: (props) => <SideBar {...props} />,
  }
  
);
export default createAppContainer(DrawerNavigator);

這是導航/Home.js

export default class Screen extends React.Component {
                 
                 render() {
                   const { navigate } = this.props.navigation;
                   return (
                     <View style={styles.container}>
                       <SafeAreaView style={{ flex: 1 }}>
                         <TouchableOpacity
                           style={{ alignItems: "flex-end", margin: 16 }}
                           onPress={() => this.props.navigation.openDrawer}
                         >
                           <FontAwesome5
                             name="bars"
                             size={24}
                             colors="#161924"
                           />
                         </TouchableOpacity>
                         <View
                           style={{
                             flex: 1,
                             alignItems: "center",
                             justifyContent: "center",
                           }}
                         >
                         </View>
                       </SafeAreaView>
                     </View>
                   );
                 }
               }

這是 App.js 代碼

export default class App extends React.Component {
  
    return (
      <Block>
        <Navigation />
        
        </Block>
        
    );
  }
}

Answer 1

您的App.js看起來如何？ 確保您只有一個root navigator 。 您必須將DrawerNavigator嵌套在StackNavigator中，反之亦然。

根據導航的工作方式，我建議您將DrawerNavigator RootNavigator StackNavigator在其中。 這樣，您就可以在 StackScreens 中調用openDrawer StackScreens ，因為它指的是父導航器。

請參閱文檔React Navigation - Nesting Navigator

編輯：

navigation/index.js（這樣不需要drawer.js）

import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import *Screens from '../screens/*';

const StackNav = createStackNavigator({
  Home: HomeScreen,
  Login: LoginScreen,
  SignUp: SignUpScreen
}, {
  defaultNavigationOptions: {...}
})

const DrawerNav = createDrawerNavigator({
  Profile: ProfileScreen,
  Educational: EducationalScreen,
  Stack: StackNav
}, {
  defaultNavigationOptions: {...}
})

const Navigation = createAppContainer(DrawerNav)

export default Navigation

我不確定上面的嵌套是否適合您的應用程序流程。 在其他人中嵌套抽屜導航器