用图像响应本地地图和标注

Question

我无法在自定义标记标注中显示图像(来自资产和web)：标注中的图像总是显示为空白矩形。

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>

        )
    }
}

地图的主要组成部分是：

<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.io)，但也尝试了仿真器，并在设备上安装了APK (安卓；没有关于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>

Answer 2

在用于<Image/>的自定义Callout中，定位Android有点困难。这对Android来说有点神秘。尤其是通过环绕文本来显示它的技巧。看起来，它也会影响造型。我不得不用这个“修复”和一些定制的样式来单调地计算出https://reactnative.dev/docs/image#resizemode，pff。

我最终得到了两种不同的风格，一种是Android风格，一种是iOS风格。

{Platform.OS === "android" ? <Text style={styles.imageWrapperAndroid}>
  <Image
    resizeMode="cover"
    source={
      event.imageUrl
        ? { uri: event.imageUrl }
        : require("../assets/images/no-image.jpeg")
      }
    style={styles.imageAndroid}
  />
</Text> : <Image
  source={
    event.imageUrl
      ? { uri: event.imageUrl }
      : require("../assets/images/no-image.jpeg")
    }
  style={styles.imageIOS}
/>}
...
const styles = StyleSheet.create({
imageAndroid: {
  height: 200,
  width: 330,
},
imageIOS: {
  height: "50%",
  width: "100%",
},
imageWrapperAndroid: {
  height: 200,
  flex: 1,
  marginTop: -85,
  width: 330,
},
...
});