抽屉在阵营天然

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

在侧抽屉（控制面板部件），我创建5按钮。当我点击一个按钮，就这样表示：

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

我希望它是全尺寸的。

Answer 1

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

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

我的建议是：

1）只与链接（该'controlpanel'点到组件的组件替换您content属性）

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

更换的东西，如：

content={<ControlPanel />} 

2）点击按钮后，您应该将想要显示的路线推送到导航器对象，以便它出现在对象上直接位置。

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