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 : 모달이 나타나면 실행된다.