如何使用react-native-router-flux在react-native-drawer中进行导航
问题描述:
我已使用react-native-drawer
创建了抽屉。抽屉查看包含ListView
。无论何时单击renderRow
方法,都需要在抽屉本身内部显示导航,而不是在Welcome
屏幕堆栈的顶部。如何使用react-native-router-flux在react-native-drawer中进行导航
预计: want to achieve something like this - Multi Level Menu
文件:组件/ welcome.js
render(){
var settingPanel = <Setting closeDrawer={() => {
this.drawer.close();
}} />
return(
<Drawer
ref={c => this.drawer = c}
type='overlay'
content={settingPanel}
...>
<Home />
</Drawer>
);
}
文件:组件/ setting.js
render(){
return(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
/>
);
}
renderRow (items) {
return(
<View>
<Text style={styles.rowText}>{items.name}</Text>
<ImageButton onPress={Actions.trans()} img={fb} />
</View>
)
};
它在Welcome
屏幕顶部导航。我需要在抽屉本身上导航。我怎么能做到这一点?
答
从它的文档here
选项打开抽屉 三个选项:
-
使用开放道具(控制模式):
<Drawer open={true}
-
使用抽屉编号:
// assuming ref is set up on the drawer as (ref) => this._drawer = ref onPress={() => {this._drawer.open()}}
-
使用上下文
contextTypes = {drawer: React.PropTypes.object} // later... this.context.drawer.open()
然后导航到使用反应本地路由器通量另一个组件,你可以添加一个TouchableOpacity
组件insted的的<home />
然后onPress
添加actions.home()
和家庭是关键反应原生路由器通量场景组件
我可以打开和关闭抽屉。这不是问题。 Plz见SS。我如何导航到抽屉内的另一个组件? – Balasubramanian
使用'TochableOpacity'或任何按钮组件我已更新答案 –