无法打开/关闭抽屉布局 react-native-gesture-handler

【问题标题】：Cannot Open/Close Drawer Layout react-native-gesture-handler无法打开/关闭抽屉布局 react-native-gesture-handler
【发布时间】：2021-10-06 16:07:56
【问题描述】：

我第一次尝试使用 react-native-gesture-handler 中的抽屉布局，但每次我尝试使用它都不会打开。

我收到此错误（都在 openDrawer 中）：

const newBet: React.FC = () => {
  let drawer: any = null;

  var renderDrawer = () => {
    return (
      <Button onPress={drawer.closeDrawer()} title='Close Drawer'></Button>
    );
  };
  var render = () => {
    return (
      <View style={{ flex: 1 }}>
        <DrawerLayout
          ref={(refDrawer) => {
            refDrawer = refDrawer;
          }}
          drawerWidth={200}
          drawerPosition='right'
          drawerType='front'
          drawerBackgroundColor='#ddd'
          renderNavigationView={renderDrawer}
        >
          <Button onPress={drawer.openDrawer} title='Open Drawer'></Button>
        </DrawerLayout>
      </View>
    );
  };
  return (
    <TouchableOpacity>
      <Text onPress={drawer.openDrawer()}>Render Drawer Layout</Text>)
    </TouchableOpacity>
  );
};

export default newBet;

【问题讨论】：

标签： javascript typescript react-native

【解决方案1】：

您将drawer 设置为null，但从未为其赋值。您在ref={} 中有错字：

ref={(refDrawer) => {
   // refDrawer = refDrawer; Assigning value to itself here :)
   drawer = refDrawer 
}}

另外，我不确定，因为我没有检查这个，但我认为ref={drawer} 也可以。

接下来，注意你有时是如何写作的

onPress={drawer.closeDrawer()} // ending with '()'
// vs
onPress={drawer.openDrawer} // ending without '()'

你不能直接调用一个函数，否则它会立即执行它。所以要么写：

onPress={drawer.closeDrawer}
// or
onPress={() => drawer.closeDrawer()}

这应该可以解决问题！

【讨论】：