Реагируйте на родные карты и выноски с изображениями

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>

        )
    }
}

И основной компонент карты:

<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>

Answer 2

Позиционирование<Image/>было немного сложно в обычаеCalloutдля . Какая-то загадка для , ИМХО. Особенно с уловкой отображать его, обертывая Text. Похоже, это влияет и на стиль. Мне пришлось монотонно выяснять https://reactnative.dev/docs/image#resizemode с этим «исправлением» вместе с некоторыми пользовательскими стилями, которые работают, пфф.

Я закончил с двумя разными стилями, один для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,
},
...
});