Использование DrawerNavigation со StackNavigator - PullRequest
Новая
       7

Использование DrawerNavigation со StackNavigator

0 голосов
/ 12 сентября 2018

Поэтому, прежде чем мое приложение будет открыто, оно должно войти в систему / зарегистрироваться, что я использую для него 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 после входа в систему / регистрации на главной страницеприложения?

1 Ответ

0 голосов
/ 12 сентября 2018

Просто объявите 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')

...