在react-native-maps MapView中使用远程图像uri

Question

我在本机应用程序中使用react-native-maps。我需要在地图上的MapView上发布图像。但是，我从网上获取图像。然而，据我所知，只有本地图像可以添加到反应原生地图中的Mapview。您知道如何在uri中发布react-native-maps MapView的图片吗？

我试过

<MapView style={{flex: 1}}
                loadingEnabled={true}
                region={this.state.region}
                onRegionChangeComplete={this.onRegionChangeComplete}>

               <MapView.Marker
                    coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
                    title={this.props.user_name}
                    description={this.props.user_desc}>
                   <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
               </MapView.Marker>

            </MapView>

，结果是

然后我刚用

删除了<Image/>

<MapView style={{flex: 1}}
                loadingEnabled={true}
                region={this.state.region}
                onRegionChangeComplete={this.onRegionChangeComplete}>

               <MapView.Marker
                    coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
                    title={this.props.user_name}
                    description={this.props.user_desc}>
               </MapView.Marker>

            </MapView>

，结果是

Answer 1

您可以尝试custom marker view

<MapView.Marker coordinate={marker.latlng}>
  <Image source={{uri: 'http://someCustomImageURL' }} />
</MapView.Marker>

Answer 2

我找到了方法。

实际上，我在我的应用程序中使用了Native-Base。因此，组件Thumbnail是从Native-base导入的。

我的代码就像

<MapView style={{flex: 1, justifyContent: 'space-between'}}
                loadingEnabled={true}
                region={this.state.region}
                onRegionChangeComplete={this.onRegionChangeComplete}>

               <MapView.Marker
                    coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
                    title={this.props.user_name}
                    description={this.props.user_desc}>
                    <View>
                        <Thumbnail source={{uri: this.props.user_photo}} />
                    </View>
               </MapView.Marker>

            </MapView>