自定义地图标记显示在 Android 设备上,但不显示在 iOS 上

问题描述 投票:0回答:1

我正在 React Native Expo 中构建一个跨平台应用程序,并且正在使用 react-native-maps 来渲染带有自定义标记的地图。我在 Marker 组件上使用 'icon' 属性来渲染 png 图像,除此之外,Marker 还显示一个子 Text 元素,如下所示:

              <Marker
                key={i}
                coordinate={{
                  latitude: gig.location.latitude,
                  longitude: gig.location.longitude,
                }}
                icon={require('../assets/map-pin-50pc.png')}
                onPress={() => {
                  navigation.navigate("GigDetails", {
                    venue: gig.venue,
                    gigName: gig.gigName,
                    image: gig.image,
                    blurb: gig.blurb,
                    isFree: gig.isFree,
                    genre: gig.genre,
                    dateAndTime: { ...gig.dateAndTime },
                    tickets: gig.tickets,
                  });
                }}
              >
                <Text style={styles.gigInfo_text}>{gig.genre}</Text>
              </Marker>

在 Android 设备上,自定义标记图像和文本按预期呈现。然而,在 iOS 设备上,只有文本被渲染,而“图标”图像是看不到的。关于为什么有什么建议吗?

我尝试导入图像并将其传递给图标道具,如下所示:

import mapPinImage from '../assets/map-pin-50pc.png'

...
...

icon = {mapPinImage}

这也没有用。我还检查了 41x62 像素的图像大小,大小为 2.41kb - 远低于苹果的最大尺寸要求。

对于上下文,这是呈现地图的整个组件:

import { FC } from "react";
import { useState, useMemo } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Platform,
  Dimensions
} from "react-native";
import MapView from "react-native-maps";
import { Marker } from "react-native-maps";
import { mapStyle } from "../util/mapStyle";
import { useGigs } from "../hooks/useGigs";
import { AntDesign } from "@expo/vector-icons";
import { format } from "date-fns";
import { mapProps } from "../routes/homeStack";
import { Switch } from 'react-native-paper'
import mapPinImage from '../assets/map-pin-50pc.png'


type MapScreenNavgationProp = mapProps['navigation']

interface Props {
    navigation: MapScreenNavgationProp
}

const GigMap:FC<Props> = ({ navigation }):JSX.Element => {
  const [selectedDateMs, setSelectedDateMs] = useState<number>(Date.now());
  const [isSwitchOn, setIsSwitchOn] = useState(false);
  const gigs = useGigs();


  //generates current date in format DD/MM/YYYY
  const selectedDateString:string = useMemo(() => {
    const formattedDate = format(new Date(selectedDateMs),'EEE LLL do Y')
    return formattedDate
  }, [selectedDateMs]);

  const currentDay:string = useMemo(() => {
    const formattedDay = format(new Date(selectedDateMs),'EEEE')
    return formattedDay
  },[selectedDateMs])

  const currentWeek:string = useMemo(() => {
    const formattedDay = format(new Date(selectedDateMs),'LLLL do Y')
    return formattedDay
  },[selectedDateMs])

  //Filtering through gigs to return only current day's gigs
  const gigsToday = gigs.filter((gig) => {
    const formattedGigDate = format(new Date(gig.dateAndTime.seconds * 1000), 'EEE LLL do Y')
    return formattedGigDate === selectedDateString;
  });

  const freeGigsToday = gigsToday.filter((gig) => {
    return gig.isFree === true
  })

  const gigsToDisplay = isSwitchOn ? freeGigsToday : gigsToday
  
  //increments date by amount
  const addDays = (amount:number):void => {
    setSelectedDateMs((curr) => curr + 1000 * 60 * 60 * 24 * amount);
  };

  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);

  return (
    <View style={styles.container}>
      <View testID="gigMapHeader" style={styles.headerText}>
        <Text style={styles.headerText_main}>{currentDay}</Text>
        <Text style={styles.headerText_sub}>{currentWeek}</Text>
      </View>

      <View style={styles.imageText}>
        <Text style={styles.subHeader}>Tap on the</Text>
        <Image
          style={styles.image}
          source={require("../assets/map-pin-new.png")}
        />
        <Text style={styles.subHeader}>
          icons on the map to see more gig info
        </Text>
      </View>

      <View style={styles.mapContainer}>
        <MapView
          initialRegion={{
            latitude: -41.29416,
            longitude: 174.77782,
            latitudeDelta: 0.03,
            longitudeDelta: 0.03,
          }}
          style={styles.map}
          customMapStyle={mapStyle}
        >
          {gigsToDisplay.map((gig, i) => {
            return (
              <Marker
                key={i}
                coordinate={{
                  latitude: gig.location.latitude,
                  longitude: gig.location.longitude,
                }}
                icon={require('../assets/map-pin-50pc.png')}
                onPress={() => {
                  navigation.navigate("GigDetails", {
                    venue: gig.venue,
                    gigName: gig.gigName,
                    image: gig.image,
                    blurb: gig.blurb,
                    isFree: gig.isFree,
                    genre: gig.genre,
                    dateAndTime: { ...gig.dateAndTime },
                    tickets: gig.tickets,
                  });
                }}
              >
                <Text style={styles.gigInfo_text}>{gig.genre}</Text>
              </Marker>
            );
          })}
        </MapView>
      </View>

      <View style={styles.buttonOptions}>
        <TouchableOpacity onPress={() => addDays(-1)} style={styles.touchable}>
          <AntDesign name="caretleft" size={36} color="#000000" />
          <Text style={{ fontFamily: "NunitoSans", color: "#000000",marginLeft:'8%' }}>
            Previous day
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => addDays(1)} style={styles.touchable}>
          <AntDesign name="caretright" size={36} color="#000000" />
          <Text style={{ fontFamily: "NunitoSans", color: "#000000",marginRight:'8%' }}>
            Next day
          </Text>
        </TouchableOpacity>
      </View>

      <View style = {styles.buttonAndSwitch}>
        <TouchableOpacity
          onPress={() => navigation.navigate("List")}
          style={styles.button}
        >
          <Text style={styles.buttonText}>List View</Text>
        </TouchableOpacity>
          <View style = {styles.switch}>
            <Switch value={isSwitchOn} onValueChange={onToggleSwitch} color = '#377D8A' />
            <Text style = {styles.switch_text}>Free Events</Text>
          </View>
      </View>

    </View>
  );
};

const {width:screenWidth, height:screenHeight} = Dimensions.get('window')
const mapWidth = screenWidth * 0.9 //this sets width to 90%
const mapHeight = mapWidth /0.91 //this set height  based on the figma map aspect ratio of 0.91



const styles = StyleSheet.create({
  container: {
    // flexDirection: "column",
    // alignItems: "center",
    flex:1
  },
  map: {
    height: '100%',
    width: '100%'
  },
  mapContainer:{
    marginTop: '5%',
    marginHorizontal: 20,
    width: mapWidth,
    height: mapHeight,
    flex:1,
    ...Platform.select({
      ios: {
        borderRadius:26,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.3,
        shadowRadius: 2,
      },
      android: {
        overflow: 'hidden',
        borderRadius:26,
        elevation: 4,
      }
    })
  },
  gigInfo: {
    // backgroundColor: '#68912b',
    // marginTop:20
  },
  gigInfo_text: {
    fontSize:10,
    color:'black',
    fontFamily:'NunitoSans',
    paddingTop: 25,
    textAlign:'center',
    fontWeight:'bold'
  },
  gigInfo_text_genre: {
    color: "white",
    fontFamily: "Helvetica-Neue",
    transform: [{ translateY: -5 }],
  },
  headerText: {
    color: "black",
    fontSize: 25,
    marginTop: '0%',
    marginLeft: '7%',
    fontFamily: "NunitoSans",
    marginBottom: 10,
    
  },
  headerText_main: {
    fontFamily: "NunitoSans",
    fontSize:25,
    lineHeight:34.1
  },
  headerText_sub: {
    fontFamily:'LatoRegular',
    size:14,
    lineHeight:16.8
  },
  callout: {
    width: "auto",
    height: "auto",
    backgroundColor: "azure",
  },
  buttonOptions: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop:'4%',
    width:'100%'
  },
  buttonOptionsText: {
    margin: 5,
  },
  image: {
    height:20,
    width:14,
    marginHorizontal:3
  },
  imageText: {
    flexDirection: "row",
    marginLeft:'7%',
    marginTop:27
  },
  touchable: {
    flexDirection: "column",
    alignItems: "center",
  },
  subHeader: {
    fontFamily: "LatoRegular",
    color: "#747474",
    size: 12,
    lineHeight: 17.04
  },
  button:{
    flexDirection:'column',
    width:115,
    height:37,
    marginLeft:'7%',
    backgroundColor:'#377D8A',
    borderRadius:8,
    justifyContent:'center',
    marginTop:'6%'
  },
  buttonText: {
    color:'#FFFFFF',
    textAlign:'center',
    fontFamily: 'NunitoSans',
    fontSize:16,
    lineHeight:22
  },
  buttonAndSwitch:{
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-between'
  },
  switch:{
    marginRight:'6%',
    transform: [{translateY:7}]
  },
  switch_text: {
    fontFamily: 'LatoRegular',
    fontSize:10,
    transform:[{translateY:-10}]
  }
});

export default GigMap;
ios react-native expo react-native-maps
1个回答
0
投票

尝试用图像图标替换图标图像数据道具作为标记的子组件。


<Marker
    key={i}
    coordinate={{
      latitude: gig.location.latitude,
      longitude: gig.location.longitude,
    }}
    icon={require("../assets/map-pin-50pc.png")}
    onPress={() => {
      navigation.navigate("GigDetails", {
        venue: gig.venue,
        gigName: gig.gigName,
        image: gig.image,
        blurb: gig.blurb,
        isFree: gig.isFree,
        genre: gig.genre,
        dateAndTime: { ...gig.dateAndTime },
        tickets: gig.tickets,
      });
    }}
  >
    <Image
      source={require("../assets/map-pin-50pc.png")}
      style={{ width: 40, height: 40 }}
    />
    <Callout>
      <Text style={styles.gigInfo_text}>{gig.genre}</Text>
    </Callout>
  </Marker>

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.