将抽屉导航与 StackNavigator 一起使用答案

【问题标题】：Using DrawerNavigation with StackNavigator将抽屉导航与 StackNavigator 一起使用
【发布时间】：2018-09-12 12:23:47
【问题描述】：

所以在我的应用程序打开之前，它需要登录/注册我用于它的 StackNavigator，然后在我成功登录的地方，我有 mainPage(MapContainer)，我想在其中使用抽屉导航器，我看到的所有导师只是简单的例子。

AppRouteConfig

import { createStackNavigator, 
  TabNavigator,
  TabBarBottom, 
  DrawerNavigator,
} from 'react-navigation';

const AppRouteConfig = createStackNavigator({
    SignIn: { screen: SignIn },
    SignUp: { screen: SignUp},
    ForgotPassword: { screen: ForgotPassword },
    ExploreContainer: { screen: MapContainer }, 
});

export const Drawer = DrawerNavigator({
    Publish: { screen: Publish}
},
{
  drawerPosition:'left',
  drawerBackgroundColor:'transparent',
  drawerWidth:200,   
});

export default AppRouteConfig;

发布

export default class PublishRoom extends Component {
    static navigationOptions = {
        drawerLabel:'Publish',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('../img/user.png')}
                style={{width:26, height:26,tintColor:'#964f8e'}}
             />   
        ),
};

    render() {
        return (
            <View style={{
            flex:1,
            backgroundColor:'#964f8e',
            alignItems:'center',
            justifyContent:'center'
            }}>
            <Text style={{
                fontWeight:'bold',
                fontSize:22,
                color:'white'
            }}
            >This is a publish room screen</Text>
                </View>
        );
    }
}

我调用抽屉的地方
自动完成

class AutocompleteExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            cities: [],
            query: ''
        };
    }
    render() {
        return (
            <View style={styles.wrapper}>
                <Icon
                    name="ios-search"
                    size={20}
                    color={colors.gray02}
                    style={styles.searchIcon}
                />
                <TouchableOpacity style={styles.menu}>
                    <Text style={styles.text} onPress={()=> this.props.navigation('DrawerOpen')}>Menu</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

export default AutocompleteExample;

应用

import React, { Component } from 'react';
import Root  from './src/navigators/AppRouteConfig';

export default class App extends Component {
    render() {
        return (
                <Root/>
        );
    }
}

在应用主页面登录/注册后有什么方法可以做DrawerNavigator吗？

【问题讨论】：

标签： reactjs react-native react-native-android react-navigation

【解决方案1】：

只需将 DrawerNavigator 声明为主 StackNavigator 中的路由：

const AppRouteConfig = createStackNavigator({
    SignIn: { screen: SignIn },
    SignUp: { screen: SignUp},
    ForgotPassword: { screen: ForgotPassword },
    ExploreContainer: { screen: MapContainer },

    // Declare Drawer here:
    DrawerNav: { screen: Drawer }
});

export const Drawer = DrawerNavigator({
    Publish: { screen: Publish}
},

然后，只需使用 .navigate('DrawerNav') 导航

【讨论】：

不，它不起作用，我有一个错误“DrawerNav 不是反应组件”。