Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

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

$
0
0

I wish Rendering a Marker with a custom image in react-native IOS app.

I testing rendered sample data image in data.js (png)but it doesn't worsk, how to I fixed it.this is my firsrt time react-native plz help me

this is my sourcode in 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,// }

and this was sample data png in data.js

const { Platform } = require("react-native");let image = Platform.select[{    makerImage:"https://i.ibb.co/nnV730F/maxresdefault.png",}]

this is my Map.tsx viewscreenshot


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>