如何在 React-native 中使用自定义图像渲染标记 IOS

Question

我希望在 react-native IOS 应用程序中渲染带有自定义图像的标记。

我在 data.js (png) 中测试渲染样本数据图像但它不起作用，我该如何修复它。这是我第一次 react-native 请帮助我

这是我在 Map.tsx

中的源代码

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import MapView from 'react-native-maps';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
MaterialCommunityIcons.loadFont();
import Geolocation, { PositionError } from 'react-native-geolocation-service';
import { Marker } from 'react-native-maps'

//TODO: <Stack.Navigator> 만들기
const Map: React.FC<{}> = () => {
  const [location, setLocation] = useState({
    coords: {
      latitude: 0,
      longitude: 0,
      latitudeDelta: 0,
      longitudeDelta: 0,
    },
  });
  const [authState, setAuth] = useState('denied');
  const getUserLocation = async () => {
    console.log(authState);
    if (authState !== 'granted') {
      let auth = await Geolocation.requestAuthorization('whenInUse');
      setAuth(auth);
    }
    if (authState !== 'granted') return;
    if (authState === 'granted') {
      Geolocation.getCurrentPosition(
        (position) => {
          console.log(position);
          setLocation(position);
        },
        (error) => {
          // See error code charts below.
          console.log(error.code, error.message);
        },
        { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 },
      );
    }
  };
  return (
    <MapView
      style={{ flex: 1 }}
      region={{
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
        latitudeDelta: 0,
        longitudeDelta: 0,
      }}
      showsUserLocation={true}>
      <View style={styles.buttonView}>
        <MaterialCommunityIcons
          onPress={getUserLocation}
          name="home"
          color={'white'}
          size={26}
        />
      </View>
      <Marker
        coordinate={{
          latitude: location.coords.latitude,
          longitude: location.coords.longitude
        }}
        //Todo: here go
        // * 1. 마커에 사진띄우기, 2. 마커별로 map구현
        image={require('../utils/data')}
      >
      </Marker>
    </MapView>
  );
};
const styles = StyleSheet.create({
  buttonView: {
    width: 100,
    height: 100,
    position: 'absolute',
    backgroundColor: 'red',
    bottom: 30,
    right: 10,
    borderWidth: 3,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default Map;

//  const seoul location: {
//   37.532600: number,
//   127.024612: number,
// }

这是 data.js

中的示例数据 png

const { Platform } = require("react-native");

let image = Platform.select[{
    makerImage:"https://i.ibb.co/nnV730F/maxresdefault.png",
}]

这是我的 Map.tsx 观点 screenshot

Answer 1

您可以在这样的图像上使用标记。

  <Marker
    coordinate={{
      latitude: location.coords.latitude,
      longitude: location.coords.longitude
    }}
    //Todo: here go
    // * 1. 마커에 사진띄우기, 2. 마커별로 map구현
    image={require('../utils/data/yourimage.png')}
  >

或者，

  <Marker
    coordinate={{
      latitude: location.coords.latitude,
      longitude: location.coords.longitude
    }}
    //Todo: here go
    // * 1. 마커에 사진띄우기, 2. 마커별로 map구현
    image={{uri: "https://i.ibb.co/nnV730F/maxresdefault.png"}}
  >

如何在 React-native 中使用自定义图像渲染标记 IOS

How to Rendering a Marker with a custom image in React-native IOS

ios

react-native

react-native-maps

react-native-navigation