我正在使用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: {}
})
MapScreen:
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,
},
});
不幸的是,如果我尝试打开抽屉,通过向右滑动,在地图上方,它将无法打开。
有没有人知道如何解决这个问题?
答案 0 :(得分:3)
您可以使用叠加层在地图一侧添加一些不可见的边缘,捕捉打开抽屉的手势。 看起来像这样:
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,
},
});
这将使用透明覆盖,覆盖地图视图的一小部分。现在,在这个区域开始拖动手势可以触发抽屉。
答案 1 :(得分:0)
不要在地图样式上使用... StyleSheet.absoluteFillObject。 这样做可以解决您的问题
const React = require("react-native");
const { StyleSheet, Dimensions } = React;
const { width, height } = Dimensions.get("window");
export default {
map: {
width: width,
height: height
}
};
&#13;
答案 2 :(得分:0)
当您点击被薄薄的 TouchableOpacity 窗口覆盖的地图一侧时,您需要激活 ToggleDrawer()。这是 homeview 中的示例代码。确保将 props 作为变量引入您的函数。
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,
},
});