[리액트네이티브] react-native 로딩창 만들기

 

로딩창 만들기

 

페이지 변환하거나 

글을 작성했던 것을 저장할 때!!

 

아무것도 없으면 

사용자 시점에서는 변화하고 있는게 없어 보이기 때문에 해당 시스템을 꺼버리기 마련이다!

 

이런 휴먼에러를 줄이기 위해서!!

로딩창을 만들어 진행중임을 사용자에게 보여준다ㅏ

그럴때 사용하는 것이 로딩임ㅁ

 

 

로딩 화면 만들기 위해서는

react native에 있는 값이 있긴하다!

 

내 snack에서 실행 코드가 있음!!

참고하시구

https://snack.expo.dev/@yeonji1013/activity-indicator

 

학교에서 수업 들으면서 실습했던 코드이당

이런 식으로 결과값이 나오고

하단에 있는 저 로딩창이 있다

저저 파란거ㅎㅎ,,

 

 

색도 변화할 수 있는데 

좀 맘에 안들면!!

 

구글링해서 무료 gif 값을 넣어도 무방하다아

 

삼항연산자를 이용하여

값이 전달 중이라면 로딩 화면을 보여주면 되고 

전달 완료되면 로딩창이 false로 보여주면 된다!!

 

 

 

 

아무트 그런 의미를 가지고 있는 코드이다아

리액트 네ㅇ이티브 내에서 아래 코드를 넣으면 로딩 되고 있는 것이다

 

<ActivityIndicatorComponent loading={loading} />

 

 

전체 코드

import {useState} from 'react'
import { View, StyleSheet, Image, Button } from 'react-native';
import ActivityIndicatorComponent from './components/ActivityIndicatorComponent'


export default function App() {
  const[loading, setLoading] = useState(true)
  const[number, setNumber] = useState(237);

  return (
    <View style={styles.container}>
      <Image
        style={{ width: 300, height: 300 }}
        // source={Cat}
        // source = {require('./assets/cat.jpg')}
        // source = {{uri : 'https://tgzzmmgvheix1905536.cdn.ntruss.com/2020/08/becd633884454405a6497e8d927b6a1c'))
        source={{ uri: `https://picsum.photos/id/${number}/200/300` }}
        resizeMode="contain"
        onLoadEnd={() => { setLoading(false) }}
      />
      <Button
        title='change Image'
        onPress={() => {
          setNumber(number + 1)
          setLoading(true)
        }}
      />
      <Button
        title='reset'
        onPress={() => {
          setNumber(237)
          setLoading(true)
        }}
      />
      <ActivityIndicatorComponent loading={loading} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

 

 

 

 

 

 

 

저장되어 있는 내역에서 선택하기

<Image style={{ width: 100, height: 100, resizeMode: 'contain', }} source={require('../../assets/Loading.gif')} />

 

이미지 링크를 통해서 값 넣기

<Image
    style={{ width: 100, height: 100, resizeMode: 'contain', }}
    source={'https://labs.kakaoi.ai/_nuxt/img/ico_loading.1e39849.gif'}
/>

 

 

귀찮다면 내가 원하는 gif인 것을 찾아서 추가 하면된다!

​

내가 커스텀한 것이 들어가고 싶으면 위 참고 내용을 확인하면 될거 같다...

담에 시간날때 해보기!

​

 

참고!!

https://anerim.tistory.com/221