Question

因此，在打开我的应用程序之前，需要先登录/注册我要使用的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？

Answer 1

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

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')

进行导航

将DrawerNavigation与StackNavigator结合使用

1 个答案: