Question

我正在使用DrawerLayoutAndroid并努力研究如何以编程方式打开和关闭它。

我看到你应该使用

openDrawer（0）但是如何引用DrawerLayoutAndroid

我有一个我在文档中制作的抽屉，然后我在我的View上有一个按钮，如果按下它我想要它打开DrawerLayoutAndroid

我创建了这个功能

toggleDrawer(){
  openDrawer(0);
};

但这显然不起作用，只是抛出一个错误。

Answer 1

你应该使用refs。我在这里粘贴示例供您参考

    var DrawerExample = React.createClass({

        openDrawer:function() {
            this.refs['myDrawer'].openDrawer();
        },

        closeDrawer:function() {
            this.refs['myDrawer'].closeDrawer();
        },

        render: function() {
            var navigationView = (
                <View style={{flex: 1, backgroundColor: '#fff'}}>
                    <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>

                    <TouchableHighlight onPress={this.closeDrawer}>
                        <Text>{'Close Drawer'}</Text>
                    </TouchableHighlight>

                </View>
            );
            return (
                <DrawerLayoutAndroid ref="myDrawer"
                    drawerWidth={300}
                    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>
            );
        },
    });

Answer 2

you have to Use

ref = {_ drawer =＆gt; （this.drawer = _drawer）}

import React, { Component } from "react";
import {
  Text,
  View,
  DrawerLayoutAndroid,
  TouchableHighlight
} from "react-native";
export default class DrawerExample extends Component {

  constructor() {
    super();
    this.openDrawer = this.openDrawer.bind(this);
  }

  openDrawer() {
    this.drawer.openDrawer();
  }

  render() {
    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 => (this.drawer = _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>
    );
  }
}

Answer 3

如果必须以编程方式从一个位于drawerlayoutandroid中的组件（例如View）打开它，则需要使用“.bind（this）”调用函数openDrawer（）。否则，你将无法使它工作，即使使用refs（无论如何你都需要使用，正如Jagadish写的那样）。我有几天这个问题，直到我发现我刚写的东西。希望它有所帮助。

Answer 4

这是我使用功能组件和React.context实现它的方式：

创建抽屉上下文：

//DrawerContext.ts

import React from 'react';

export const DrawerContext = React.createContext<{
    isOpen: boolean;
    open: () => void;
    close?: () => void;
}>({
    isOpen: null,
    // close: null,
    open: null,
});

然后在您的应用中：

export const SideMenu: React.FC = (props) => {

    const drawerRef = useRef<DrawerLayoutAndroid>();
    const [drawerIsOpen, setDrawerIsOpen] = useState(false);
 
    useEffect(() => {
        drawerRef.current.openDrawer(); //open drawer when app loads
        setDrawerIsOpen(true);
    }, []);
    return (
            <DrawerLayoutAndroid
                drawerWidth={300}
                renderNavigationView={() => <SideMenuItems />}
                drawerBackgroundColor="rgba(0,0,0,0.5)"
                ref={drawerRef} //get the ref to the drawer
            >
                {/* Pass down the references using the context provider */}
                <DrawerContext.Provider value={{
                    open: () => drawerRef?.current?.openDrawer(),
                    isOpen: drawerIsOpen
                }}>
                    {props.children}
                </DrawerContext.Provider>
            </DrawerLayoutAndroid>
        )
}

最后，在任何子组件中使用上下文：

//MyComponent.ts
import {DrawerContext} from './DrawerContext.ts'
...
export const MyComponent: React.FC = (props) => {
    const { open, isOpen, } = useContext(DrawerContext);
    return(
        ...
        <Button onPress={open}>Open Drawer!!</Button>
        ...
    )

}

以编程方式反应原生的DrawerLayoutAndroid

4 个答案: