React Native Maps - Callout不显示内部图像

Question

当我尝试在React Native Maps标注中渲染图像时遇到问题。

图像不会渲染。

{this.state.database.map((route, idx) => {
        if (route.Image) {
          return (
            <MapView.Marker
              coordinate={{ latitude: Number.parseFloat(route.Latitude), longitude: Number.parseFloat(route.Longitude) }}
              key={idx}
              image={img_pin}
              ref={(ref) => this.marker = ref}
            >
              <MapView.Callout tooltip style={{ flex: 1, backgroundColor: 'white' }}>
                <View style={{ flexDirection: 'row' }}>
                  <View style={{ flex: 1 }}>
                    <Text style={styles.textCallout}>Latitude: {route.Latitude}</Text>
                    <Text style={styles.textCallout}>Longitude: {route.Longitude}</Text>
                    <Text style={styles.textCallout}>Status: <Icon name={route.Status === 1 ? 'checkmark-circle' : 'close-circle'} style={{ color: route.Status === 1 ? 'green' : 'red', fontSize: 16 }} /> </Text>
                    <Text style={styles.textCallout}>Velocidade: {route.Speed} km/h</Text>
                  </View>
                  <View style={{ margin: 5 }}>
                    <Image source={{ uri: `data:image/gif;base64,${route.Image}` }} style={{ width: 150, height: 100 }} />
                  </View>
                </View>
              </MapView.Callout>
            </MapView.Marker>
          );
        }
      })}

Image error don't render inside Callout

"react-native": "^0.57.8",
"react-native-maps": "^0.24.2",

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

确保您的route.image是url模式的形式，

exampleData

 source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}

如果正确，

安卓上的

GIF和WebP支持

在构建自己的原生代码时，安卓系统默认不支持GIF和WebP。

您将需要在android/app/build.gradle中添加一些可选模块，具体取决于应用程序的需求。

build.gradle:

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.10.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:1.10.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:1.10.0'
  implementation 'com.facebook.fresco:webpsupport:1.10.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:1.10.0'
}

用法

  <MapView.Callout tooltip={true} style={{ backgroundColor: 'white', height: contentHeight, width: contentWidth }}>
                <View style={{ flexDirection: 'column' }}>
                  <View style={{ flex: 1 }}>
                    <Text style={styles.textCallout}>Latitude: {route.Latitude}</Text>
                    <Text style={styles.textCallout}>Longitude: {route.Longitude}</Text>
                    <Text style={styles.textCallout}>Status: <Icon name={route.Status === 1 ? 'checkmark-circle' : 'close-circle'} style={{ color: route.Status === 1 ? 'green' : 'red', fontSize: 16 }} /> </Text>
                    <Text style={styles.textCallout}>Velocidade: {route.Speed} km/h</Text>
                  </View>
                 <Image source={{ uri: `data:image/gif;base64,${route.Image}` }} style={{ width: 150, height: 100, resizeMode="cover" }} />
                </View>
              </MapView.Callout>