使用图像对本机地图和标注进行反应

Question

我无法在自定义标记标注中显示图像（来自资产和网络）：标注中的图像始终显示为空白矩形。

class CustomCalloutView extends React.Component {

    render() {
        return (

            <View>
                <View>
                    <Text style={{
                        fontWeight: "bold",
                    }}>
                        Test
                </Text>
                </View>
                <View>
                    <Image
                        source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
                        style={{ width: 100, height: 100 }}
                    />
                </View>
            </View>

        )
    }
}

主要的 Map 组件是：

<MapView
    style={{ flex: 1 }}
    initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
    }}>
    {this.state.markers.map(marker => (
        <Marker
            key={marker.id}
            coordinate={marker.latlng}>
            <Callout>
                <CustomCalloutView />
            </Callout>
        </Marker>
    ))}
</MapView>);

标记正确显示，标注呈现，但图像未显示。如果我在普通视图中使用相同的图像。

我正在使用 expo (expo.io) 但也尝试了模拟器并在设备上安装了 APK（android；没有关于 ios 的信息）。

Answer 1

在文本组件中使用图像。像这样的东西：

<Text>
      <Image style={{ height: 100, width:100 }} source={{ ... }} resizeMode="cover" />
</Text>

使用 WebView 的另一种解决方法。我认为这是目前正确的解决方案。

<View>
      <WebView style={{ height: 100 , width: 230, }} source={{ uri: ... }} />
</View>