react-native-maps Marker 的 zIndex 属性在 iOS 11 中无法正常工作
react-native-maps Marker's prop zIndex doesn't work correctly in iOS 11
在 iOS 11 zIndex props of marker (react-native-maps) 当我 select 通过更改状态标记时无法正常工作,因为当我移动地图时 selected 标记传递给背景。只有当我按下标记时才有效。
在 Android 或 iOS 10,9,8 中工作正常。
黄色标记必须在前景中。
拜托,有人知道我该如何解决这个问题吗?
我的代码:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Dimensions
} from 'react-native';
const { width, height } = Dimensions.get('window');
import MapView, { PROVIDER_GOOGLE, PROVIDER_DEFAULT } from 'react-native-maps';
const { Marker } = MapView;
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
index: 0
};
this.markers = [
{ id: 1, latitude: 43.152, longitude: -1.30051 },
{ id: 2, latitude: 43.1525, longitude: -1.30201 },
{ id: 3, latitude: 43.15264, longitude: -1.30025 },
{ id: 5, latitude: 43.1527, longitude: -1.30201 },
{ id: 6, latitude: 43.1525, longitude: -1.3001 },
{ id: 7, latitude: 43.1527, longitude: -1.30043 },
{ id: 8, latitude: 43.1526, longitude: -1.300531 },
{ id: 9, latitude: 43.1525, longitude: -1.30011 },
{ id: 10, latitude: 43.1521, longitude: -1.30062 },
{ id: 4, latitude: 43.152, longitude: -1.30083 }
];
}
render() {
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_DEFAULT}
style={{ flex: 1 }}
initialRegion={{
latitude: 43.153,
longitude: -1.3,
longitudeDelta: 20,
latitudeDelta: 15
}}
minZoomLevel={15}
ref={ref => { this.map = ref }}>
{this.markers.map((marker, i) => {
const selected = this.state.index == i;
return (
<Marker
key={'m' + marker.id}
coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
onPress={() => this.setState({ index: i })}
zIndex={selected ? 2 : 1}>
<View style={[styles.marker, selected ? {zIndex:2} : {zIndex:1}]}>
<View style={styles.bubbleContainer}>
<View style={[styles.bubble, selected && styles.selected]}>
<Text style={styles.txt}>test</Text>
</View>
</View>
</View>
</Marker>
);
})}
</MapView>
<TouchableOpacity onPress={() => this.setState({ index: Math.round(Math.random() * 10) })}>
<Text>Random select</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
height
},
marker: {
width: 50
},
bubbleContainer: {
flexDirection: 'column',
alignSelf: 'flex-start',
backgroundColor: 'transparent',
height: 45,
},
bubble: {
flex: 0,
flexDirection: 'row',
alignSelf: 'flex-start',
justifyContent: 'center',
padding: 10,
borderRadius: 10,
borderColor: '#D1D1D1',
borderWidth: 1,
width: 49,
backgroundColor: '#fff',
},
txt: {
color: '#000',
},
selected: {
backgroundColor: '#F7FF00'
},
});
RN: 0.48.4 / 0.50.4
RN 地图:0.16.4 / 0.18.1
OS: iOS 11 / 11.1
我已经解决了编辑 AIRMapMarker.m 文件的问题。
我观察到,当您点击标记时,zIndex 效果很好。所以我在 C Swift 代码中看到了 setSelected 方法,并在 setZIndex.
中复制了该方法
我写了一个条件:
- (void)setZIndex:(NSInteger)zIndex
{
if (zIndex == 2) { // added line
[self setSelected:YES animated:NO]; // added line
} else { // added line
[self setSelected:NO animated:NO]; // added line
} // added line
_zIndex = zIndex;
self.layer.zPosition = _zIndex;
}
它是硬编码的但有效。
在 iOS 11 zIndex props of marker (react-native-maps) 当我 select 通过更改状态标记时无法正常工作,因为当我移动地图时 selected 标记传递给背景。只有当我按下标记时才有效。
在 Android 或 iOS 10,9,8 中工作正常。
黄色标记必须在前景中。
拜托,有人知道我该如何解决这个问题吗?
我的代码:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
Dimensions
} from 'react-native';
const { width, height } = Dimensions.get('window');
import MapView, { PROVIDER_GOOGLE, PROVIDER_DEFAULT } from 'react-native-maps';
const { Marker } = MapView;
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
index: 0
};
this.markers = [
{ id: 1, latitude: 43.152, longitude: -1.30051 },
{ id: 2, latitude: 43.1525, longitude: -1.30201 },
{ id: 3, latitude: 43.15264, longitude: -1.30025 },
{ id: 5, latitude: 43.1527, longitude: -1.30201 },
{ id: 6, latitude: 43.1525, longitude: -1.3001 },
{ id: 7, latitude: 43.1527, longitude: -1.30043 },
{ id: 8, latitude: 43.1526, longitude: -1.300531 },
{ id: 9, latitude: 43.1525, longitude: -1.30011 },
{ id: 10, latitude: 43.1521, longitude: -1.30062 },
{ id: 4, latitude: 43.152, longitude: -1.30083 }
];
}
render() {
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_DEFAULT}
style={{ flex: 1 }}
initialRegion={{
latitude: 43.153,
longitude: -1.3,
longitudeDelta: 20,
latitudeDelta: 15
}}
minZoomLevel={15}
ref={ref => { this.map = ref }}>
{this.markers.map((marker, i) => {
const selected = this.state.index == i;
return (
<Marker
key={'m' + marker.id}
coordinate={{ latitude: marker.latitude, longitude: marker.longitude }}
onPress={() => this.setState({ index: i })}
zIndex={selected ? 2 : 1}>
<View style={[styles.marker, selected ? {zIndex:2} : {zIndex:1}]}>
<View style={styles.bubbleContainer}>
<View style={[styles.bubble, selected && styles.selected]}>
<Text style={styles.txt}>test</Text>
</View>
</View>
</View>
</Marker>
);
})}
</MapView>
<TouchableOpacity onPress={() => this.setState({ index: Math.round(Math.random() * 10) })}>
<Text>Random select</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff',
height
},
marker: {
width: 50
},
bubbleContainer: {
flexDirection: 'column',
alignSelf: 'flex-start',
backgroundColor: 'transparent',
height: 45,
},
bubble: {
flex: 0,
flexDirection: 'row',
alignSelf: 'flex-start',
justifyContent: 'center',
padding: 10,
borderRadius: 10,
borderColor: '#D1D1D1',
borderWidth: 1,
width: 49,
backgroundColor: '#fff',
},
txt: {
color: '#000',
},
selected: {
backgroundColor: '#F7FF00'
},
});
RN: 0.48.4 / 0.50.4
RN 地图:0.16.4 / 0.18.1
OS: iOS 11 / 11.1
我已经解决了编辑 AIRMapMarker.m 文件的问题。
我观察到,当您点击标记时,zIndex 效果很好。所以我在 C Swift 代码中看到了 setSelected 方法,并在 setZIndex.
中复制了该方法我写了一个条件:
- (void)setZIndex:(NSInteger)zIndex
{
if (zIndex == 2) { // added line
[self setSelected:YES animated:NO]; // added line
} else { // added line
[self setSelected:NO animated:NO]; // added line
} // added line
_zIndex = zIndex;
self.layer.zPosition = _zIndex;
}
它是硬编码的但有效。