ant-design / ant-design-mobile-rn

Ant Design for React Native
https://rn.mobile.ant.design/
MIT License
3k stars 610 forks source link

[Bug] Drawer 有时不能关闭侧边layout #1318

Closed reamal closed 7 months ago

reamal commented 7 months ago

💬 Before You Start

🙋 Description/Step to reproduce

我在升级我的rn版本到0.72以后,drawer 控件出现了可能无法关闭侧边栏的问题,谁能帮我看看呢?

这是页面代码

function DrawerScreen({ navigation }) {
  const sidebar = (
    <View>
          <View style={{marginTop:100}}>
          <TouchableOpacity
            onPress={() => {
              if (this.drawer) {
                this.drawer.closeDrawer()
              } else {
                console.log('drawer is null ..')
              }
            }}
            style={{ justifyContent: 'center', alignItems: 'center' }}
          >
            <Text style={{ fontSize: 12, color: '#0071B9' }}>close drawer</Text>
          </TouchableOpacity>
          </View>
        </View>
  )

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer
        open={false}
        position="left"
        onOpenChange={(isOpen) => {
          console.log('是否打开了 Drawer', isOpen.toString())
        }}
        drawerRef={(el) => (this.drawer = el)}
        sidebar={sidebar}
        drawerWidth={280}
        drawerBackgroundColor='#ffffff'
      >
        <View style={{marginTop:300}}><TouchableOpacity onPress={() => {
          if (this.drawer) {
            this.drawer.openDrawer()
          } else {
            console.log('drawer is null ..')
          }
        }} style={{ justifyContent: 'center', alignItems: 'center' }}>
          <Text style={{ fontSize: 12, color: '#0071B9' }}>open drawer</Text>
        </TouchableOpacity></View>
      </Drawer>
    </GestureHandlerRootView>
  );
}
// package.json 
"dependencies": {
    "@ant-design/react-native": "^5.0.5",
    "@react-native-camera-roll/camera-roll": "^6.0.2",
    "@react-native-community/geolocation": "^3.1.0",
    "@react-native-community/segmented-control": "^2.2.2",
    "@react-native-community/slider": "^4.4.3",
    "@react-native-picker/picker": "^2.5.1",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "add": "^2.0.6",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-drawer-layout": "^3.2.2",
    "react-native-gesture-handler": "^2.13.4",
    "react-native-reanimated": "^3.5.4",
    "react-native-router-flux": "^4.3.1",
    "react-native-safe-area-context": "^4.7.4",
    "react-native-screens": "^3.27.0",
    "react-native-ui-lib": "^7.9.1",
    "yarn": "^1.22.21"
  },

💻 Environment

Android

⚫️ Output of npx react-native info

System: OS: macOS 13.5 CPU: (8) arm64 Apple M1 Memory: 133.61 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 16.10.0 path: /usr/local/bin/node Yarn: version: 1.22.21 path: ~/kone/code/rntest/AwesomeProject/node_modules/.bin/yarn npm: version: 7.24.0 path: /usr/local/bin/npm Watchman: version: 2023.09.04.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms:

Additional comments

这是录屏

https://github.com/ant-design/ant-design-mobile-rn/assets/20561112/5f787460-4773-45a6-b8ab-32818ba4cecb

reamal commented 7 months ago

我试了一下react-native-gesture-handler的DrawerLayout,应该是这个组件引起的。 可以看这个issues https://github.com/software-mansion/react-native-gesture-handler/issues/2208