将抽屉传递给导航器视图
问题描述:
我试图将抽屉传递给不同的视图,以便他们可以在单击按钮时将其打开。将抽屉传递给导航器视图
index.js - 在这里创造的抽屉
renderScene(route, navigator) {
var Component = ROUTES[route.name];
return <Component route={route} navigator={navigator} api={new Api()} session={new Session()} style={globalStyle} {...route.passProps} />;
}
render() {
return (
<Drawer
ref={(ref) => { this._drawer = ref; } }
type="overlay"
tweenDuration={150}
//content={<SideBar navigator={this._navigator} />}
tapToClose
acceptPan={false}
onClose={() => this.closeDrawer()}
openDrawerOffset={0.2}
panCloseMask={0.2}
styles={{
drawer: {
shadowColor: '#000000',
shadowOpacity: 0.8,
shadowRadius: 3,
},
}}
tweenHandler={(ratio) => {
return {
drawer: { shadowRadius: ratio < 0.2 ? ratio * 5 * 5 : 5 },
main: {
opacity: (2 - ratio)/2,
},
};
} }
negotiatePan
>
<Navigator
ref={(ref) => { this._navigator = ref; } }
initialRoute={{ name: 'home', passProps: { drawer: this._drawer } }}
renderScene={this.renderScene}
/>
</Drawer>
);
}
home.js - 这是页眉和页脚,以及在打开的抽屉按钮。
render() {
return (
<Container>
<Header>
<Button transparent onPress={this.props.drawer.open()}>
<Icon name="ios-menu" />
</Button>
<Title>Botulo.</Title>
</Header>
<Content>
<Text>{this.props.user.display}</Text>
</Content>
<Footer>
<FooterTab>
<Button transparent>
<Icon name='ios-person' />
</Button>
<Button transparent>
<Icon name='ios-grid-outline' />
</Button>
<Button transparent>
<Icon name='ios-chatboxes' />
</Button>
</FooterTab>
</Footer>
</Container>
);
}
问题是,在home.js中,'this.props.drawer'是未定义的。
传递抽屉实例并调用open/close()方法的正确方法是什么?
感谢您的帮助。
方舟。
答
你只需要传递下来openDrawer句柄向下至家组件,然后调用它的点击,或按。
当渲染家庭成分向下传递的onClick这样:
constructor(props) {
super(props)
this.openDrawer = this.openDrawer.bind(this)
}
this.openDrawer() {
this.setState({ drawerOpen: true })
}
render() {
let drawer = null
if (this.state.drawerOpen) {
drawer = (
<Drawer
{/* whatever props you need */}
/>
)
}
return (
<Container>
{ drawer }
<Home
onClick={this.openDrawer}
{/* whatever else props you need */}
/>
</Container>
);
}
终于在家里,你这样做
render() {
return (
<Container>
<Header>
<Button transparent onPress={this.props.onClick}>
<Icon name="ios-menu" />
</Button>
<Title>Botulo.</Title>
</Header>
</Container>
);
}
你可以看到,一旦在用户点击按钮打开抽屉,那么抽屉组件将被渲染。
这对你有意义吗?