通过ToolbarAndroid => onIconClicked显示DrawerLayoutAndroid
通过ToolbarAndroid => onIconClicked显示DrawerLayoutAndroid
提问于 2015-09-20 22:55:18
我刚开始使用原生的React (和React)，我正在尝试使用它。
我设法添加了一个可以从屏幕左侧拖动的DrawerLayout。然而，当我点击ToolbarAndroid中的菜单图标时，我想打开它。
我试着使用"refs“，但似乎不起作用。
我希望我说得够清楚了。
谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-09-21 17:23:56
你应该像你提到的那样使用"refs“。为此，为您的抽屉组件设置"ref“属性：
<DrawerLayoutAndroid
...
ref={'DRAWER_REF'}
...
/>然后在你的组件中使用this.refs来访问它，并在该引用上调用openDrawer或closeDrawer (例如，你可能想要有Touchable元素来触发这个调用)：
this.refs['DRAWER_REF'].openDrawer();Stack Overflow用户
发布于 2015-10-11 00:14:20
使用ReactNative示例，您可以这样做：
var DrawerTest = React.createClass({
openDrawer:function() {
this.refs['DRAWER'].openDrawer()
},
render: function() {
var navigationView = (
<View style={{flex: 1, backgroundColor: '#fff'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
ref={'DRAWER'}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={{flex: 1, alignItems: 'center'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
<TouchableHighlight onPress={this.openDrawer}>
<Text>{'Open Drawer'}</Text>
</TouchableHighlight>
</View>
</DrawerLayoutAndroid>
);
}
});Stack Overflow用户
发布于 2016-05-31 17:59:01
我只想添加另一个解决方案，特别是在使用Navigator渲染场景时。
如果是这种情况，那么上面的解决方案将无法工作，因为它不能访问在DrawerLayoutAndroid中指定的ref，并且它实际上将返回
"undefined is not an object (evaluating 'this.refs['DRAWER_REF']')"或者类似的东西。
解决方案：
创建我们自己的工具栏，这样我们就可以将我们的渲染组件传递给它。
MyToolbar.js
... import stuff ...
module.exports = React.createClass({
render: function() {
return (
<ToolbarAndroid
title={this.props.title}
navIcon = {{uri: "ic_menu_white_24dp", isStatic: true}}
style = {styles.toolbar}
titleColor='#FFFFFF'
onIconClicked={this._onIconClicked}/>
);
},
_onIconClicked: function(){
this.props.sidebarRef.refs['DRAWER'].openDrawer();
// sidebarRef is the rendering component we're passing
}
});OpenDrawerFromToolbar.js
...
module.exports = React.createClass({
render: function() {
var navigationView = (
<View style={{flex: 1, backgroundColor: '#fff'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>In the Drawer!</Text>
</View>
);
return (
<View style={styles.container}>
<DrawerLayoutAndroid drawerWidth = {300}
drawerPosition = {DrawerLayoutAndroid.positions.Left}
renderNavigationView = {() => navigationView}
ref={'DRAWER'}>
<MyToolbar style={styles.toolbar}
title={'My Awesome App'}
navigator={this.props.navigator}
sidebarRef={this}/> // pass the component to MyToolbar
<View style = {{flex: 1, alignItems: 'center'}}>
<Text style = {{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
<Text style = {{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
</View>
</DrawerLayoutAndroid>
</View>
);
},
_setDrawer: function() {
this.refs['DRAWER'].openDrawer();
}
});然后我们的导航器组件和它的renderingScene函数将会工作：
module.exports = React.createClass({
render: function() {
return (
<Navigator
style = {styles.container}
initialRoute = {{ name: 'openDrawerFromToolbar', index: 0 }}
renderScene = {this.navigatorRenderScene}
configureScene={ () => { return Navigator.SceneConfigs.PushFromRight; }}/>
);
},
navigatorRenderScene: function(route, navigator) {
_navigator = navigator;
return (
<OpenDrawerFromToolbar
route={route}
navigator={navigator}
data={route.data}/>
);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32680725
复制相关文章
相似问题