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

【问题标题】：Navigation drawer getting open after coming back from other screen从其他屏幕返回后导航抽屉打开
【发布时间】：2019-02-01 12:05:18
【问题描述】：

我正在使用 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]
                                          }
                                        ],
                                      }
                                    }
                                  }
                                },
                        ],

                    }
                }
            }
        }
    });

回到主屏幕后我没有得到，那么为什么导航抽屉被打开了。

下面是navigation-drawer按下文字后的代码

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

如果有人可以，请提供帮助。提前致谢。

【问题讨论】：

当为下一个功能选择项目或按钮时，您必须关闭抽屉

标签： android react-native navigation-drawer back-button react-native-navigation

【解决方案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

【讨论】：

【解决方案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-native-navigation 默认创建的抽屉的组件 ID。

【讨论】：

谢谢，但我做了同样的事情 this.goClose 包含关闭的合并选项
你能不能也发布你的this,goClose函数
Navigation.mergeOptions(this.props.componentId, { sideMenu: { left: { visible: false, } } });
和你的一样