Question

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

以下是有正确的按钮，打开导航抽屉我的主屏幕的代码。

Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('email')->unique();
        $table->string('password');
        $table->string('firstname')->default(0);  
        $table->string('lastname')->default(0);
        $table->timestamps();
    });

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

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>
        );
    }
}

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

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

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]
                                          }
                                        ],
                                      }
                                    }
                                  }
                                },
                        ],

                    }
                }
            }
        }
    });

如果有人可以，请提供帮助。预先感谢。

Answer 1

这种情况发生在您按下按钮时打开导航抽屉（侧面菜单）时，组件homescreen像

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

，然后通过向右/向左滑动来关闭侧面菜单。在此阶段，homescreen的导航选项为

         sideMenu:{
             left:{
                 visible:true
             }
         }

因此，当您的homescreen部件重新出现在堆栈中，所述sidemenu将显示为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-native-navigation创建的抽屉的组件ID。

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

2 个答案: