React原生的抽屉

Question

我在反应原生

中实现抽屉

  <Drawer
    ref={(ref) => this._drawer = ref}
    type="overlay"
    tapToClose={true}
    content={ <Navigator

       initialRoute={{name: 'controlpanel'}}
       renderScene={this.renderScene.bind(this)}
        />}

    acceptDoubleTap
    styles={{main: {shadowColor: '#000000', shadowOpacity: 0.3, shadowRadius: 15}}}
    onOpen={() => {
      console.log('onopen')
      this.setState({drawerOpen: true})
    }}
    onClose={() => {
      console.log('onclose')
      this.setState({drawerOpen: false})
    }}
    tweenDuration={100}
    panThreshold={0.08}
    disabled={this.state.drawerDisabled}
    openDrawerOffset={0.2}
    panOpenMask={0.2}
    negotiatePan
    >

     <Navigator

       initialRoute={{name: 'main'}}
       renderScene={this.renderScene.bind(this)}
        />

在侧抽屉（ControlPanel组件）中，我创建了5个按钮。当我点击一个按钮时，它显示如下：

点击我的帐户后，它看起来像这样：

我希望它是全尺寸的。

Answer 1

content属性应该接收要在Drawer中显示的组件，并且Drawer的children标签应该接收应用程序的主要内容。

我想，当用户点击链接时，它应该关闭抽屉并在主页上显示内容，对吗？

我的建议是：

1）将您的content属性替换为仅带有链接的组件（'controlpanel'指向哪个组件？）

content={ <Navigator
   initialRoute={{name: 'controlpanel'}}
   renderScene={this.renderScene.bind(this)}
    />}

替换为：

content={<ControlPanel />}

2）单击按钮后，您应该将要显示的路径推送到导航器对象，使其显示在正确的位置。

navigator.push({ name: 'main' });