[React_Native_study_16]useAsset 사용법

[React_Native_study_16]useAsset 사용법

* 본 강의는 nomad coder의 react native master class를 듣고 공부를 위해 작성하였습니다.

Image 형태에 따른 useAsset 사용법

1) Local Image 사용 (asset 폴더 내에 있을 시)

import { Asset } from 'expo-asset'; const [assets] = useAssets([require('path/to/asset.jpg'), require('path/to/other.png')]); if (!assets) { return ; }

2) Image fetch를 통한 uri 사용 시

* 단일 이미지

// useAssets 배열내에 image uri 주소를 넣어준다. const [assets] = useAssets([`uri주소`])

* 여러 이미지 불러오기

// useAssets 내에 배열의 형태로 uri값을 넣어준다. const [assets] = useAssets(cleanedList.map((list) =>`https://cryptoicon-api.vercel.app/api/icon/${list.symbol.toLowerCase()}`) ) // aseets의 형태를 console.log 를 통해 확인함 // 아래와 같은 식으로 배열의 형태에 각각의 정보가 있으며 사용 시 여기에서 uri값을 사용한다. 0:{hash:null,localUri:"https://cryptoicon-api.vercel.app/api/icon/btc",width:null,height:null,downloading:false,downloaded:true,_downloadCallbacks:[],name:"btc",type:"",uri:"https://cryptoicon-api.vercel.app/api/icon/btc"} ►1:{hash:null,localUri:"https://cryptoicon-api.vercel.app/api/icon/eth",width:null,height:null,downloading:false,downloaded:true,_downloadCallbacks:[],name:"eth",type:"",uri:"https://cryptoicon-api.vercel.app/api/icon/eth"} ►2:{hash:null,localUri:"https://cryptoicon-api.vercel.app/api/icon/hex",width:null,height:null,downloading:false,downloaded:true,_downloadCallbacks:[],name:"hex",type:"",uri:"https://cryptoicon-api.vercel.app/api/icon/hex"} ►3:{hash:null,localUri:"https://cryptoicon-api.vercel.app/api/icon/bnb",width:null,height:null,downloading:false,downloaded:true,_downloadCallbacks:[],name:"bnb",type:"",uri:"https://cryptoicon-api.vercel.app/api/icon/bnb"} ►4:{hash:null,localUri:"https://cryptoicon-api.vercel.app/api/icon/usdt",width:null,height:null,downloading:false,downloaded:true,_downloadCallbacks:[],name:"usdt",type:"",uri:"https://cryptoicon-api.vercel.app/api/icon/usdt"} ►5:{hash:null,localUri:"https://cryptoicon-api.vercel.app/api/icon/sol",width:null,height:null,downloading:false,downloaded:true,_downloadCallbacks:[],name:"sol",type:"",uri:"https://cryptoicon-api.vercel.app/api/icon/sol"} ►6:{hash:null,localUri:"https://cryptoicon-api.vercel.app/api/icon/ada",width:null,height:null,downloading:false,downloaded:true,_downloadCallbacks:[],name:"ada",type:"",uri:"https://cryptoicon-api.vercel.app/api/icon/ada"}

3) 전체적인 사용법

// 여러 이미지 일 때 배열의 형태로 uri값을 받아온다. const [assets] = useAssets([`https://cryptoicon-api.vercel.app/api/icon/${cleanedList[0].symbol.toLowerCase()}`]) // 가져오지 못했을 경우 loading 화면을 띄운다. if (!assets) { return ; } console.log(assets) // 사용시에는 assets = []의 형태로 되어있으므로 map 등을 이용하여 사용하며, assets내의 uri값을 사용한다. return ( );

from http://qcoding.tistory.com/18 by ccl(A) rewrite - 2021-12-30 11:00:57