android - React Native 中的抽屉

Question

我在 React Native 中实现抽屉

  <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 属性应该接收要在抽屉内显示的组件，抽屉的子标签应该接收应用的主要内容。

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

我的建议是:

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

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

替换成类似的东西:

content={<ControlPanel />}

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

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