react-native 정리 - 4 Image, Modal

soob·2021년 10월 3일
0

react-native

목록 보기
4/5

Image

1. Local image
assets/images 이미지를 넣을 폴더를 생성한다.
이미지를 넣고 이미지를 불러올 파일에 import 해준다.

	import ImgComponent from './asstes/images/file_name.jpg'
<Images
        source={ImgComponent}
        resizeMode="contain"
/>

resizeMode
contain : 주어진 공간에서 이미지의 비율을 유지한다.
cover : 주어진 공간을 꽉 채운다.

2. Serve image

<Images
        source={{uri: 'uri적는다'}}
        resizeMode="contain"
        onLoadEnd={()=>alert('img loading!')}
/>

onLoadEnd : 이미지가 로딩 된 뒤에 실행된다.

Modal을 import 해준다.

import { Modal, View, Button } from 'react-native';

state= {
	modal: false
}

//modal 핸들러
handleModal = () => {
   this.setState({
      modal: this.state.modal ? false : true
   })
}

//컴포넌트 사용
<Button
	title="open modal!"
        onPress={this.handleModal}
/>

<Modal
	visible={this.state.modal}
        animationType={'none'} // slide , fade
        onShow={()=>alert('보인다!')}
>
	<View>
    
    </View>
</Modal>

animationType : 모달이 나타나는 효과를 설정해준다. none이면 효과 X / slide는 아래에서 위로 나타나는 효과 / fade 서서히 나타나는 효과
onShow : 모달이 나타나면 실행된다.

0개의 댓글