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

Question

我正在为我的 react-native 应用程序使用 react-native-maps。我需要在地图上的 MapView 上发布图像。但是，我从网络上获取图像。然而，据我所知，只有本地图像可以在 react-native-maps 中添加到 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/>with

<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

我找出路。

实际上，我在我的应用程序中使用了 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>

Answer 2

您可以尝试 自定义标记视图

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