react-native-maps标注内容未随更改而更新

问题描述

我正在尝试使用react-native-maps npm包更新Google地图视图上<Callout>标签的内容。我想在按下地图标记后动态加载额外的内容。我已将代码简化为以下示例：-

我已经尝试使用标记上的tracksInfoWindowChanges属性和showCallout()方法来尝试手动触发重新渲染。我使用的是android，因此redrawCallout()方法之类的仅iOS选项不可用。

const MyMap = (props) => {
    const [marker,setMarker] = useState({});

    return (
        <MapView
            showsUserLocation
            zoomControlEnabled={true}
            zoomEnabled={true}
            region={{
                latitude: 0,longitude: 0,latitudeDelta: 0.03,longitudeDelta: 0.03,}}>
            <Marker
                coordinate={{latitude: 0,longitude: 0}}
                onPress={(e) => {
                    setMarker({ title: 'Test'});           
                }}>
                 <View>
                     <Icon name='key' size={40} color='#384963'</Icon> 
                 </View>
                 <Callout>
                    <Text>{marker.title}</Text>              
                 </Callout>
             </Marker>
        </MapView>
    );
}

是否可以在渲染一次标注后触发内容的重新渲染？通过调试，我可以看到在更新标记状态后该组件将呈现，但是在手动关闭该标注并重新打开它之前，该内容不可见。

解决方法

我遇到了完全相同的问题。根据{{​​3}}，对于android的建议是使用showCallout()。以下是我使用showCallout()解决此问题的方法：

const MyMap = (props) => {
    const [marker,setMarker] = useState({});
    let markerRef = useRef(null);

    useEffect(() => {
        if (markerRef.current) {
            markerRef.current.showCallout();
        }
    })

    return (
        <MapView
            showsUserLocation
            zoomControlEnabled={true}
            zoomEnabled={true}
            region={{
                latitude: 0,longitude: 0,latitudeDelta: 0.03,longitudeDelta: 0.03,}}>
            <Marker
                ref={markerRef}
                coordinate={{latitude: 0,longitude: 0}}
                onPress={(e) => {
                    setMarker({title: `Test ${Math.floor(Math.random() * 10)}`});         
                }}>
                 <View>
                     <Icon name='key' size={40} color='#384963' /> 
                 </View>
                 <Callout>
                    <Text>{marker.title}</Text>              
                 </Callout>
             </Marker>
        </MapView>
    );
}

简而言之，我添加了markerRef并在markerRef.current.showCallout()中调用useEffect()。如果我没记错的话，这样做的结果是每次重新渲染MyMap时，标注将被强制再次显示。我还更改了onPress，以使标注重新渲染的效果更加明显。

注1：每次按下标记时，标注均应更新其文字。

注2：如果您有多个标记和标注，并且只想更新当前正在查看的标注，则必须在useEffect()中添加另一条支票。这样的操作：if (markerRef.current && selectedMarker === 'markerID')可以确保仅连续重绘所需的标注。