在地图上滑动时反应本机抽屉未打开答案

【问题标题】：React native drawer not opening on swipe over map在地图上滑动时反应本机抽屉未打开
【发布时间】：2017-06-17 08:56:41
【问题描述】：

我正在使用 react-native-navigation 启动一个单屏应用，其中包含使用 - react-native-maps 和左侧抽屉的 Google 地图：

导航：

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

地图屏幕：

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,
    },
});

很遗憾，如果我试图通过在地图上向右滑动来打开抽屉，它不会打开。

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

【问题讨论】：

标签： react-native react-native-android react-native-ios react-native-maps react-native-navigation

【解决方案1】：

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

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,
  },
});

这将使用透明的覆盖并覆盖地图视图的一小部分。现在在该区域开始拖动手势可以触发抽屉。

【讨论】：

【解决方案2】：

不要在地图样式上使用 ...StyleSheet.absoluteFillObject。这样做将解决您的问题

const React = require("react-native");

const { StyleSheet, Dimensions } = React;
const { width, height } = Dimensions.get("window");
export default {

  map: {
    width: width,
    height: height
  }
};

【讨论】：

【解决方案3】：

当您点击被薄的 TouchableOpacity 窗口覆盖的地图一侧时，您需要激活 ToggleDrawer()。这是homeview中的示例代码。确保将道具作为变量引入您的函数。

import React from 'react';
import {View, Text, SafeAreaView, StyleSheet, Dimensions, TouchableOpacity} from 'react-native';

import MapView, {Marker} from 'react-native-maps';

const HomeScreen = (props) => {

    
    
    return(
        <SafeAreaView style = {{flex: 1}}>
            <View style = {styles.container}>
            <MapView
          style={styles.mapStyle}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
            }
          />
        </MapView>
        <TouchableOpacity style = {styles.mapDrawerOverlay} onPress = {() => {
                    props.navigationProps.toggleDrawer();}
         } />
            </View>
        </SafeAreaView>
    );
};

export default HomeScreen;


  const styles = StyleSheet.create({
    container: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      alignItems: 'center',
      justifyContent: 'flex-end',
    },
    mapDrawerOverlay:{
        position: 'absolute',
        left: 0,
        top: 0,
        opacity: 0.0,
        height: Dimensions.get('window').height,
        width:10,

    },
    mapStyle: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
  });

【讨论】：