React Native Maps — выноска не показывает изображение внутри

У меня проблема, когда я пытаюсь отобразить изображение внутри выноски 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>
          );
        }
      })}

Ошибка изображения не отображается внутри выноски

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

react-native react-native-maps
person Guilherme Campos    schedule 28.06.2019    source источник
comment
Вы добавили поддержку в build.gradle?   -  person hong developer    schedule 28.06.2019
comment
Какая поддержка? Не могли бы вы объяснить мне лучше?   -  person Guilherme Campos    schedule 28.06.2019

Ответы (2)


arrow_upward
1
arrow_downward

Использовать изображение внутри текстового компонента

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

Другой обходной путь с использованием WebView. Я думаю, что это правильное решение для этого прямо сейчас.

<View>
  <WebView style={{ height: 100 , width: 230, }} source={{ uri: ... }} />
</View>
person Martin Dimitrov    schedule 23.03.2020

arrow_upward
0
arrow_downward

Убедитесь, что ваш route.image представлен в виде схемы URL,

примерДанные

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

если правильно,

Поддержка GIF и WebP на Android

При создании собственного нативного кода GIF и WebP по умолчанию не поддерживаются на Android.

Вам нужно будет добавить несколько дополнительных модулей в 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>
person hong developer    schedule 28.06.2019
comment
Да... После внесения изменений - person Guilherme Campos; 28.06.2019
comment
Это может быть сложно, но я снова обновил свой ответ. Хотели бы вы запустить его? - person hong developer; 28.06.2019