[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 <AppLoading />;
  }

 

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 <Container>
      <ActivityIndicator color={"blue"} size={"large"}></ActivityIndicator>
    </Container>;
  }

  console.log(assets)

// 사용시에는 assets = []의 형태로 되어있으므로 map 등을 이용하여 사용하며, assets내의 uri값을 사용한다.
  return (
    <Container>
       <Image
            style={{
              width: 40,
              height: 40,
              borderRadius: 20,
              marginBottom: 10,
            }}
            source={{
              uri: assets[0].uri,
            }}
          />
    
    </Container>
  );