행동에서 React Native의 Require를 깊이 파고들다

개시하다

여러분 require('./relative-path') 하고 있어요?
흔히 볼 수 있는 것은 로고 이미지와 같은 정적 PNG를 읽고 앱에 넣는 것입니까?

<Image source={require('./logo.png')} />

디버그 환경(Metro 연결 개발)에서require(./logo.png)의 반환값은 console입니다.로그 등의 각도에서 보면 정수치만 되돌아온다.2라4라, 파일 수와 비례하여 계수가 증가할 것 같다.
React Native의 표준 구성 요소만 사용한다면 이 수수께끼를 풀 필요가 없다require 시스템의 사용자 정의 구성 요소와 Native Module을 개발하고 싶어서요.
좀 알아볼게요.

Image.resolveAssetSource()

우선 안드로이드 등R.res.logo의 R반과 늘 가깝다는 생각이 든다.

App resources overview  |  Android Developers

이렇게 되면 안드로이드에서도 준비한 ResID에서 비트맵 인스턴스와 Resource 인스턴스를 얻을 수 있는 메커니즘이 있어야 합니다.
결론은 호출react-native에서 제공된 Image 구성 요소가 제공하는 방법Image.resolveAssetSource(resID)을 통해 대상을 얻을 수 있다는 것이다.

Image · React Native # resolveAssetSource()

iOS에서 메트로를 연결하는 환경, 즉 debug 구축에서 다음과 같은 데이터를 되돌려주었다(보기 편리하도록 줄 바꾸기 문자를 추가했다).

{
	"__packager_asset": true,
	"width": 1000
	"height": 1000,
	"scale": 1,
	"uri": "http://localhost:8081/assets/example/booklist-test.png?platform=ios&hash=6ffab54f1ce2fd718f05f696f0ed9fb7",
}

iOS에서 메트로의release를 통해 구축되지 않은 경우(Xcode의 Output을 통해 확인된 JSON이 아님)

{ 
  __packager_asset: true,
  width: 1000,
  height: 1000,
  scale: 1
  uri: 'file:///Users/keima/Library/Developer/CoreSimulator/Devices/EE8E1339-DC30-4948-BE39-020E60874379/data/Containers/Bundle/Application/B915DC08-FD21-4528-A4E9-F76C9A071CEC/example.app/assets/example/booklist-test.png',
}

React Native의 Image 구성 요소를 통해 네트워크 파일을 얻었을 때 다음과 같은 실시 방식의 샘플이 있었지만, 여기서source에 전달된 유형과resolveAssetSource() 되돌아오는 유형은 공통점이 있다.

<Image source={{
    uri: 'https://reactnative.dev/img/tiny_logo.png'
}} />

또한 이 대상의 형식은 앞으로도 동일하다고 보장할 수 없다.
앞으로는 이미지가sprite 형식(큰 그림 파일의 직사각형 영역의 모양을 가리키는 말)으로 되돌아오고,Image 구성 요소 등이 그것을 지원한다면 리퀘어만 사용하면 영향을 주지 않지만, 리퀘어가 되돌아오는 데이터 의존 구조가 되면 알 수 없다고 생각합니다.

Images · React Native # Source as an object

그래서 수수께끼를 풀어야 돼!
또한 제3파티 라이브러리의 실시 예로 react-native-video가 잘했다고 생각합니다.

https://github.com/react-native-community/react-native-video/blob/5683167a3a8e6a1d7d49526c995cf253def48e67/Video.js#L265

응용 실례

file: PDF 파일을 모드 URL로 열기 (여기에 준비된 Native Module 사용) 를 위한 샘플 응용 프로그램

React Native의 파일 관리 방식으로 해결

예를 들어 안드로이드는 assets 폴더에 놓을 수 있고, iOS는 Bundle 자원으로 관리할 수 있다

하지만 이번 요구는'다운받은 PDF를 켜라'이기 때문에 프로그램에서 접근할 수 있는 폴더에 PDF 파일을 넣어야 한다.

검증 환경에서 다운로드 프로그램이 필요하지 않으므로 응용 프로그램에서 액세스할 수 있는 폴더에 배치된 파일을 복사하여 시뮬레이션

이를 위해 리퀘스트로 PDF를 만들고 응용 프로그램에서 접근 가능한 폴더로 복사하고 싶습니다. 그러면 어떻게 실현합니까?

그 결과 debug 환경에서 네트워크를 통해 다운로드 처리를 하고release 환경file에서 패턴을 통해 복제 처리를 하는 것이 좋다.
설치 예는 다음과 같다(많은 난잡함이 있을 수 있으나 샘플 응용에서만 사용할 수 있으니 양해해 주십시오).

import { Image } from 'react-native';
import RNSF from 'react-native-fs'

...

const FILEPATH_PDF = `${RNSF.DocumentDirectoryPath}/file.pdf`

...

const fileExists = await RNSF.exists(FILEPATH_PDF)
console.log('file status: exists:', fileExists)
if (!fileExists) {
    // store file
    const pdf = Image.resolveAssetSource(require('./file.pdf'))
    console.log('pdf:', pdf) // <- resolveAssetSource のデータを見る
    const uri = pdf.uri
    if (uri.match(/^https?:/)) {
        try {
            await RNSF.downloadFile({
                fromUrl: uri,
                toFile: FILEPATH_PDF,
            }).promise
        } catch (e) {
            console.warn('OpenPDF:', e)
            return
        }
    } else if (uri.match(/^file:/)) {
        try {
            await RNSF.copyFile(uri, FILEPATH_PDF)
        } catch (e) {
            console.warn('OpenPDF:', e)
            return
        }
    }
}

실제로는 잘 안 쓸 수도 있지만 알면 언젠가는 쓸모가 있을 거예요?
그게 다야.