通过ToolbarAndroid => onIconClicked显示DrawerLayoutAndroid

Question

我是React native(和React)的新手,我正在玩它.

我设法添加一个DrawerLayout,我可以从屏幕左侧拖动.但是,当我点击ToolbarAndroid中的菜单图标时,我想打开它.

我试图使用"refs"但它似乎不起作用

我希望我足够清楚.

谢谢

Answer 1

你应该像你提到的那样使用"refs".为此,您的抽屉组件设置了"ref"属性:

<DrawerLayoutAndroid
   ...
   ref={'DRAWER_REF'}
   ...
/>

然后在你的组件中使用this.refs来访问它并调用openDrawer或closeDrawer在那个引用上(例如你可能想要有一个Touchable元素来触发这个调用):

this.refs['DRAWER_REF'].openDrawer();

Answer 2

使用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>
    );

  }
});

完整文件要点