react-native-maps 마커의 소품 zIndex가 iOS 11에서 올바르게 작동하지 않습니다.

Question

iOS 11에서 상태를 변경하여 마커를 선택하면 zIndex 마커 (react-native-maps)의 소품이 제대로 작동하지 않습니다. 선택한 마커 패스를 배경으로 이동합니다. 마커를 눌러야 제대로 작동합니다.

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 : 아이폰 OS 11/11.1

Answer 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; 
} 

는 하드 코딩 만 작동합니다.