如何在react-native中登录后将'react-native-drawer'仅对仪表板可见-Java 学习之路

在react-native中，我想在登录时禁用抽屉并在仪表板屏幕上启用抽屉 . 我已经使用Navigator实现了'react-native-drawer'来在路线之间导航 .

render method as follows:

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 as follows to navigate the routes:

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

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

I have written one method to enable and disable drawer in 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);
      }
}

Initially I have set property in class and in constructor, navigate method was called.

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

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

那么哪种方法可以在 Login 菜单上禁用抽屉并在 Dashboard 屏幕上启用它 .

2 回答

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 表示 Dashboard 页面上禁用 left 和 right ，但 Dashboard 上仅启用 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>
        )
    }
}

回复于 2024-05-05T22:12:44+08:00

2
您可以在登录场景中将抽屉的 panOpenMask 和 panCloseMask 属性设置为0 .

像这样的东西
```
<Drawer>
   panOpenMask={isItLoginPage? 0 : 0.2}
   panCloseMask={isItLoginPage? 0 : 0.2}
   ...
</Drawer>
```
回复于 2024-05-05T22:12:44+08:00

如何在react-native中登录后将'react-native-drawer'仅对仪表板可见

2 回答

相关问题