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

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

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

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

，然后通过向右/向左滑动关闭侧边菜单。在此阶段，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

Answer 2

在推动新屏幕的导航抽屉功能中，您只需在按下抽屉之前关闭抽屉，如下所示：

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-本机导航创建的抽屉组件 ID。