反应本机 - 图像未显示在地图视图中的自定义标注上？

Question

我有一个带有标记的地图屏幕，我尝试将图像添加到标注中，并且我使用与在其他可行的地方相同的方法

<image source = .. /> 

，但在地图上它不会向我显示图片。

 {
        this.state.markers.map(marker => (
          
          <MapView.Marker
            key={marker.id}
            coordinate={{longitude: marker.longitude, latitude: marker.latitude}}>
              <MapView.Callout>
                <View>
                      <View>
                        {marker.imageUri && <Image source = {{uri: marker.imageUri}}
                        style = {{ width: '90%', height: 100, justifyContent: 'center', flex: 1, alignContent: 'center', resizeMode: 'stretch'}}
                      />  }        
                      </View>
                    <Text>Lat: {marker.latitude}, Lon: {marker.longitude}</Text>
                    <Text>{marker.email}</Text>
                </View>
              </MapView.Callout>         
          </MapView.Marker>
        ))
      }

它给了我一个空白视图而不是图像。 我是不是做错了什么？

Answer 1

在文本组件中使用图像，这很奇怪，但它有效:)

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

Answer 2

https://docs.expo.io/versions/latest/sdk/webview/

从'react-native-webview'导入{WebView}；

如果 const isAndroid = Platform.OS === 'android';为 true 则渲染 WebView...如果不渲染 Image。

Answer 3

我通过使用 Android 的 webView 修复了它：

const Img = isAndroid ? WebView: Image; return <Img source={{uri: someUri}} />

Answer 4

这对我来说是一个更好的解决方案，而不是在文本中使用图像，而是使用包react-native-svg，如本讨论中所述：https://github.com/react-native-maps/react-native -地图/问题/2633#issuecomment-734327144

      Import {Svg, Image as ImageSvg} from 'react-native-svg';

         <Svg width={240} height={120}>
                 <ImageSvg
                     width={'100%'} 
                     height={'100%'}
                     preserveAspectRatio="xMidYMid slice"
                     href={{ uri: 'http://lorempixel.com/400/200/'}}
                 />
             </Svg>