react-native - react 原生抽屉不会在 map 上滑动时打开

Question

我正在使用 react-native-navigation使用 - react-native-maps 启动包含 Google map 的单屏应用程序和一个左边的抽屉:

导航:

Navigation.startSingleScreenApp({
        screen: {
            screen : 'map.MapScreen',
            title : 'Map',
            navigatorStyle: {
                navBarHidden: true
            }
        },
        drawer : {
            left : {
                screen : 'drawer.DrawerScreen',
                passProps: {}
            },
            disableOpenGesture: true
        },
        animationType: 'slide-down',
        passProps: {}
    })

map 屏幕:

export default class MapScreen extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={styles.container}>
                <MapView
                    style={styles.map}
                    provider={PROVIDER_GOOGLE}>
                </MapView>
            </View>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: -1
    },
    map: {
        ...StyleSheet.absoluteFillObject,
    },
});

不幸的是，如果我尝试通过在 map 上向右滑动来打开抽屉，它将无法打开。

有没有人知道如何解决这个问题？

Answer 1

您可以使用叠加层在 map 的一侧添加一些不可见的边缘，以捕获打开抽屉的手势。
看起来像这样:

const Screen = {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
};
class Foo extends React.Component<Props, object> {
  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.mapContainer}
        />
        <View style={styles.mapDrawerOverlay} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mapContainer: {
    width: Screen.width,
    height: Dimensions.get('window').height,
  },
  mapDrawerOverlay: {
    position: 'absolute',
    left: 0,
    top: 0,
    opacity: 0.0,
    height: Dimensions.get('window').height,
    width: 10,
  },
});

这将使用透明的叠加层，覆盖 map View 的一小部分。在该区域开始拖动手势现在可以触发抽屉。