react-native-fs 로 파일 저장,접근 하기

MarkerCapture.js

• 이미지를 만들고 캡쳐해서 file system에 저장하는 코드

import React, { useRef } from 'react'
import { Text, ImageBackground, View } from 'react-native'
import ViewShot from "react-native-view-shot";

//redux
import { useSelector, useDispatch } from 'react-redux'

export function SingleCapture({ i }) {

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

    const viewShot = useRef();

    let payPerHour = locations[i].payPerHour;

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

						//file system
            let RNFS = require('react-native-fs');

            //linux의 mkdir -p 옵션과 같음. 하위 폴더 없으면 자동생성, 이미 있어도 에러안띄움
            await RNFS.mkdir(RNFS.DocumentDirectoryPath + "/PayPerHour");

            //document 폴더로 옮김. 이미 있다면 그냥 삭제
            const fileName = RNFS.DocumentDirectoryPath + "/PayPerHour/" + payPerHour + ".png";
            if (await RNFS.exists(fileName))
                await RNFS.unlink(uri);
            else
                await RNFS.moveFile(uri, fileName);
        })
    };

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


export function LoopCapture() {

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

    let captureViews = [];
    for (let i = 0; i < locations.length; i++) {
        captureViews.push(<SingleCapture i={i} key={i} />)
    }

    return (
        captureViews
    );
}

PMarker.js

• file system에 저장한 이미지를 가져와서 image 컴포넌트 인자로 넘기는 코드

import React from 'react'
import { Marker } from 'react-native-nmap'
import { useSelector } from 'react-redux'

export function PMarkers({ setModalVisible, setSelectedMarker }) {
    const { locations } = useSelector((state) => ({
        locations: state.locations,
    }))
    // console.log("여기는 마커", locations, uridatas);

		//file system
    let RNFS = require('react-native-fs');

    const Markers = [];
    for (let i = 0; i < locations.length; i++) {

        const payPerHour = locations[i].payPerHour;
        const fileName = RNFS.DocumentDirectoryPath + "/PayPerHour/" + payPerHour + ".png";

        Markers.push(
            <Marker
                coordinate={{
                    "longitude": locations[i].longitude,
                    "latitude": locations[i].latitude
                }}
                onClick={() => {
                    setModalVisible(true);
                    setSelectedMarker(i); //마커넘버 전달 (db조회번호)
                }
                }
                key={i}
                image={{ uri: 'file://' + fileName }}

                width={50} height={50}
            />
        )
    }

    return (
        Markers
    );
}