登录 react-native 后，如何设置仅对仪表板可见的“react-native-drawer" [英] How to set 'react-native-drawer' visible only to Dashboard after login in react-native

问题描述

在 react-native 中，我想在 Login 上禁用抽屉并启用抽屉在 Dashboard 屏幕上.我已经实现了 'react-native-drawer'Navigator 在路线之间导航.

In react-native, I want to disable drawer on Login and enable drawer on Dashboard Screen. I have implemented 'react-native-drawer' with Navigator to navigate between routes.

渲染方法如下:

render() {
      <Drawer
                ref={(ref) => this._drawer = ref}
                disabled={!this.state.drawerEnabled}
                type="overlay"
                content={<Menu navigate={(route) => {
                    this._navigator.push(navigationHelper(route));
                    this._drawer.close()
                }}/>}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                closedDrawerOffset={-3}
                styles={{
                    drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
                    main: {paddingLeft: 3}
                }}
                tweenHandler={(ratio) => ({
                    main: { opacity:(2-ratio)/2 }
                })}>
                <Navigator
                    ref={(ref) => this._navigator = ref}
                    configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft}
                    initialRoute={{
                        id: 'Login',
                        title: 'Login',
                        index: 0
                    }}
                    renderScene={(route, navigator) => this._renderScene(route, navigator)}
                    navigationBar={
                        <Navigator.NavigationBar
                            style={styles.navBar}
                            routeMapper={NavigationBarRouteMapper} />
                    }
                />
            </Drawer>
      );
  }

renderScene 如下导航路线:

_renderScene(route, navigator) {
    navigator.navigate = self.navigate;
        switch (route.id) {
            case 'Login':
                return ( <Login navigator={navigator}/> );

            case 'Dashboard':
                    return ( <Dashboard navigator={navigator}/> );
        }
    }

我编写了一种在 react-native 中启用和禁用抽屉的方法:

navigate(route, method){
        if(route)
        switch (route.id) {
            case 'Login':
            this.state = {drawerEnabled: false, navigationBarEnabled: false};
            break;

            case 'Dashboard':
            this.state = {drawerEnabled: true, navigationBarEnabled: true};
            break;
        }

          this.forceUpdate();
          this.refs.navigator[method](route);
      }
}

最初我在类和构造函数中设置了属性，调用了导航方法.

state = {drawerEnabled:true, navigationBarEnabled: true};

  constructor(){
    super();
    this.navigate = this.navigate.bind(this);
  }

然后有可能在Login菜单上禁用抽屉并在Dashboard屏幕上启用它.

Then which would be possible way to disable drawer on Login menu and enable it on Dashboard Screen.

推荐答案

你必须改变你的 _renderScene() 方法如下:

You have to change your _renderScene() method as follows:

_renderScene(route, navigator) {
    navigator.navigate = this.navigate;
        switch (route.id) {
            case 'Login':
                return ( <Login navigator={navigator} {...route.passProps} /> );
            case 'Dashboard':
                return ( <Dashboard navigator={navigator} {...route.passProps} />);
        }
    }

不需要 navigate() 方法，因此删除该方法.您必须根据需要编写所有案例，对于default case，您已将其设置为null.如果您设置 null 意味着 left 和 right 在 Dashboard 页面上被禁用，但只有 title 在 Dashboard 上启用.

There is no need of navigate() method, so remove that method. All cases you have to write as your need and for default case you have set it as null. If you are setting null means left and right are disabled on Dashboard page but only title is enable on Dashboard.

您需要在toolbar上为left、right和title编写代码如下:

You need to write code for left, right and title on toolbar as follows:

const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        switch (route.id) {
            case 'Dashboard':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('openMenu')}}>
                        <Icon name='menu' size={25} color={'white'} />
                    </TouchableOpacity>
                )
            default:
                return null   //For setting Dashboard left button null
        }
    },
    RightButton(route, navigator, index, navState) {
      switch (route.id) {
          case 'Dashboard':
            return (
            <TouchableOpacity
                style={styles.navBarRightButton} onPress={() => {route.onPress()}}>
                <Icon name={'map'} size={25} color={'white'} />
            </TouchableOpacity>
            )
            default:
              return null  //For setting Dashboard right button null
          }
    },
    Title(route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.title}
            </Text>
        )
    }
}

这篇关于登录 react-native 后，如何设置仅对仪表板可见的“react-native-drawer"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！