从其他屏幕返回后导航抽屉打开

Question

我正在使用 Wix 的 react-native-navigation V2。在我的导航抽屉中有一个组件名称，按下后我将进入下一个屏幕，按下后退按钮后我回来但抽屉打开了。

以下是我的主屏幕的代码，其中有打开导航抽屉的右键。

export default class Boiler extends Component {

    constructor(props) {
        super(props);
        this.isSideDrawerVisible = false;
        Navigation.events().bindComponent(this);
    }

    navigationButtonPressed({ buttonId }) {
        if (buttonId === "buttonOne") {
            (!this.isSideDrawerVisible) ? this.isSideDrawerVisible = true : this.isSideDrawerVisible = false
            Navigation.mergeOptions(this.props.componentId, {
                sideMenu: {
                    left: {
                        visible: this.isSideDrawerVisible,
                    }
                }
            });
            this.isSideDrawerVisible = false
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>Hello</Text>
            </View>
        );
    }
}

以下是我的主屏幕setRoot的代码

Navigation.setRoot({
        root: {
            sideMenu: {
                left: {
                    component: {
                        name: 'SideDrawer',
                        passProps: {
                            text: 'This is a left side menu screen'
                        }
                    }
                },
                center: {
                    stack: {
                        id: 'mainStack',
                        children: [
                            {
                                stack: {
                                    id: 'tab1Stack',
                                    children: [
                                      {
                                        component: {
                                          name: 'Home'
                                        }
                                      }
                                    ],
                                    options: {
                                      topBar: {
                                        leftButtons: [
                                          {
                                            id: 'buttonOne',
                                            icon: sources[0]
                                          }
                                        ],
                                      }
                                    }
                                  }
                                },
                        ],

                    }
                }
            }
        }
    });

回到主屏幕后，我不明白为什么导航抽屉会打开。

下面是在导航抽屉上按下文本后的代码

goNew = () => {
    this.goClose()
      Navigation.push('mainStack', {
        component: {
          name: 'NewComp',
          passProps: {
            text: 'Pushed screen'
          },
          options: {
            topBar: {
              title: {
                text: 'New Component'
              }
            },
            sideMenu: {
              left: {
              enabled: false
              }
            }
          }
        }
      });
    }

如果有人能帮忙，请帮忙。提前致谢。

Answer 1

在您推送新屏幕的导航抽屉功能中，您只需在推送之前关闭抽屉，例如：

goNew = () => {
  Navigation.mergeOptions(this.props.componentId, {
    sideMenu: {
      left: {
        visible: false
      }
    }
  })
    Navigation.push('mainStack', {
      component: {
        name: 'NewComp',
        passProps: {
          text: 'Pushed screen'
        },
        options: {
          topBar: {
            title: {
              text: 'New Component'
            }
          },
          sideMenu: {
            left: {
            enabled: false
            }
          }
        }
      }
    })
  }

其中 this.props.componentId 只是 react-native-navigation 默认创建的抽屉组件 ID。

Answer 2

当您在按下按钮时打开导航抽屉（侧边菜单）时会发生这种情况是组件说 homescreen 就像

 navigationButtonPressed({ buttonId }) {
           if(buttonId == 'menu'){                  
                  Navigation.mergeOptions(this.props.componentId, {
                        sideMenu:{
                              left:{
                                    visible:true
                              }
                        }
                  })
            }
   }

并通过滑动 right/left 关闭侧边菜单。在这个阶段，homescreen 的导航选项是

         sideMenu:{
             left:{
                 visible:true
             }
         }

因此，当您的 homescreen 组件重新出现在堆栈中时，侧边菜单将作为 visible 选项

的结果出现

解决方法在homescreen组件 subscribe to navigation events

 constructor(props) {
            super(props);
            Navigation.events().bindComponent(this); 
 }

在你的 componentDidDisappear()

 Navigation.mergeOptions(this.props.componentId,{
            sideMenu:{
                left:{
                      visible:false
                }
          }
        })

其中 this.props.componentId 是您的 homescreen 组件的 ID

从其他屏幕返回后导航抽屉打开

Navigation drawer getting open after coming back from other screen

android

back-button

navigation-drawer

react-native

react-native-navigation