Question

我想用几个屏幕创建一个小型的本机应用程序：Login和Home。但是，我还希望在主屏幕上安装抽屉导航器。抽屉将包含3个附加屏幕：设备注册，呼叫和声音检查。到目前为止，我的App.js文件看起来像这样

import { StackNavigator, DrawerNavigator } from 'react-navigation';

import Login from './src/components/Login';
import SignUp from './src/components/SignUp';
import DeviceRegistration from './src/components/DeviceRegistration';
import Call from './src/components/Call';
import Sound from './src/components/Sound';



export const Navigation = StackNavigator({
  Login: { screen: Login },
  SignUp: { screen: SignUp },
  DeviceRegistration: { screen: DeviceRegistration },
  Call: { screen: Call },
  Sound: { screen: Sound },
}, 
    {
  headerMode: 'none',
  initialRouteName: 'Login'
    } 

);


export const Drawer = DrawerNavigator({
    DeviceRegistration: { screen: DeviceRegistration },
    Call: { screen: Call },
    Sound: { screen: Sound },
}, {


});

export default Navigation;

我在哪里将抽屉放在主屏幕内，这样我就可以创建一个汉堡包图标，我可以按下它来访问抽屉导航？

Answer 1

export const Drawer = DrawerNavigator({
    SignUp: { screen: SignUp },
    DeviceRegistration: { screen: DeviceRegistration },
    Call: { screen: Call },
    Sound: { screen: Sound },
});

export const Navigation = StackNavigator({
  Login: { screen: Login },
  Home: { screen: Drawer },
});

然后在Signup组件中，拨打this.props.navigation.navigate('DrawerOpen')打开抽屉。

如何将抽屉导航器嵌套在堆栈内的页面中？

1 个答案: