我用的是react-native-maps,但我遇到了一个问题,在谷歌搜索了很多次没有答案后,我在这里问它.

在此处输入图像描述

  • 当我搜索时,我发现需要使用自定义标记来完成制造商的设计,然后我创建了一个自定义标记组件

    import React, { Component } from "react";
    import { View } from "react-native";
    import {
    Text,
    Left,
    Right,
    Thumbnail,
    } from "native-base";
    const defaultEmployeeLogo = require("../../../assets/defualtEmployee.png");
    class CustomMarker extends Component {
    render() {
        return (
        <View style={{ flexDirection: 'row', width: 140, height: 60, 
          borderRadius: 70, backgroundColor: 'orange' }}>
            <Left>
                <Thumbnail source={defaultEmployeeLogo} />
            </Left>
            <Right>
                <Text style={{
                    color: '#fef',
                    fontSize: 13,
                    paddingBottom: 2,
                    fontFamily: 'Roboto',
                    alignItems: 'center',
                    paddingRight: 10
                }}>Mohammad</Text>
            </Right></View >);
       }
    }
    export default CustomMarker;
    

当我使用自定义标记时.js类,它可以很好地工作,并显示图像,但当我使用它作为标记自定义视图时,它不会显示图像

enter image description here

我不知道为什么它不能在android中使用自定义标记渲染图像.

return (
  <View style={styles.map_container}>
    <MapView
      style={styles.map}
      customMapStyle={customrMapStyle}
      region={{
        latitude: this.state.region.latitude,
        longitude: this.state.region.longitude,
        latitudeDelta: 0.4,
        longitudeDelta: 0.41,
      }} >
      {
        coordinationData.map(function (marker, i) {

          let lat = marker.latLang.latitude;
          let lang = marker.latLang.longitude;
           <MapView.Marker
            key={i}
            coordinate={
              {
                latitude: lat,
                longitude: lang,
                latitudeDelta: 0.4,
                longitudeDelta: 0.41
              }
            }
            title={marker.title}
            description={marker.description}

          >
            <CustomMarker />
          </MapView.Marker>
        })}
    </MapView>
  </View>

任何形式的帮助都将不胜感激.

推荐答案

这个https://github.com/react-native-community/react-native-svgSVG

<Marker
    coordinate={{
        longitude: lang,
        latitude: lat,
    }}
>
    <View style={{
        flexDirection: 'row', width: 100, height: 30,
        backgroundColor: 'orange'
    }}>
        <Svg
            width={40} height={30}>
            <Image
                href={url}
                width={40}
                height={30}
            />
        </Svg>
        <View
            style={{
                flexDirection: 'column'

            }}
        >
            <Text
                style={{
                    marginLeft: 2,
                    fontSize: 9,
                    color: '#ffffff',
                    fontWeight: 'bold',
                    textDecorationLine: 'underline'
                }}
            >{marker.title}</Text>
            <Text
                style={{
                    marginLeft: 2,
                    fontSize: 9,
                    color: '#ffffff',
                    fontWeight: 'bold',
                    textDecorationLine: 'underline'
                }}
            >{marker.description}</Text>
        </View>
    </View>
</Marker>

React-native相关问答推荐

如何在renderItem中显示每个项目的索引号,保持分页的前一个下一个按钮

SignalR 与 React Native Expo:: 什么都没有发生

'React native run android' 在模拟器中启动应用程序后立即停止

fetch API 总是返回 {"_U": 0, "_V": 0, "_W": null, "_X": null}

FlatList contentContainerStyle -> justifyContent: 'center' 导致滚动问题

React Native:如何获取文件大小、mime 类型和扩展名?

如何在 React Native 中获取电话号码?

React native expection java.lang.UnsatisfiedLinkError: dlopen failed: "/data/data/{package}/lib-main/libgnustl_shared.so" is 32-bit instead of 64-bit

Rich ReactNative TextInput

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.

React Native Navigation 组件路由问题

React Native Android 负边距(Margins)

如何在android studio中导入react native元素

React-native google 登录给开发人员错误

com.facebook.react.bridge.readablenativemap 不能转换为 java.lang.string

React-native Awesome 元素没有构建 android 元素

如何在 react-native 中设置 Alert 元素的样式?

React Native:文本 node 的 Auto宽度

NavigationActions.reset 不是函数吗?

保存时 Visual Studio 代码格式化失败