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：iOS版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; 
} 

それは、ハードコーディングされたのですが、動作します。