커스텀 마커 제작

커스텀 마커 제작 (가격 표기)

• useRef() 참조 블로그

• useRef() 참조 블로그

컴포넌트 캡쳐 → png 파일로 출력

import React, { Component, useEffect, useRef } from 'react'
import { Text, Image, ImageBackground, View, StyleSheet } from 'react-native'
import { Button } from 'react-native-paper';
import ViewShot from "react-native-view-shot";
import { useSelector } from 'react-redux'

export default function TestCustomMark() {

    const { locations } = useSelector((state) => ({
        locations: state.locations
    }))

    const viewShot = useRef();
    const focusOnHandler = () => {
        viewShot.current.capture().then((uri) => console.log(uri));
    };

    return (
        <View style={{flex:0}}>
            <Button onPress={focusOnHandler}> Capture </Button>
            <ViewShot ref={viewShot} options={{ format: "png" }} style={{ borderWidth: 1, alignItems: 'center', height: 105, width: 140 }}>
                <ImageBackground source={require("../Assets/pimMarker.png")} style={{ width: 130, height: 100 }}>
                    <View style={{ flex: 1, alignItems: 'center' }}>
                        <Text style={{ paddingTop: 5, paddingLeft: 10, fontSize: 50 }}>
                            {
                                //%1f 형태로 나타냄
                                locations[3].payPerHour % 1000 == 0 ?
                                    locations[3].payPerHour / 1000 + ".0" :
                                    locations[3].payPerHour / 1000
                            }
                        </Text>
                    </View>
                </ImageBackground>
            </ViewShot>
        </View>
    );
}