MDLAB 기록/차량부품거래애플리케이션
[React Native -12] 사진 개수 제한
지유미
2022. 11. 24. 18:54
728x90
반응형
상품등록 Page에서 사진 등록하는 부분을 5개로 제한을 주려고 한다
상품등록 Page 부분
✔️ 갤러리로 이동하면서 배열크기 전달
🚫 이미지 배열크기가 5이면 경고창 뜨기 and 갤러리로 이동할 수 없음
// 갤러리로 이동
goGallerySreen=()=>{
if(this.state.imageURLs.length==5)
{
alert('이미지는 최대 5장까지 선택할 수 있어요');
}
else
{
this.props.navigation.navigate('Stack',{screen:"Gallery", params:{imageLength:this.state.imageURLs.length}});
}
}
갤러리 Page 부분
✔️ 상품등록에서 받은 imageLength값을 state값 변수로 넣어주기
this.state = {
imageLength:this.props.route.params.imageLength,
};
✔️ 이미지 버튼 터치 되면 count++, 터치 안되면 count--
🚫 이미지 배열크기가 5이상이면 경고창 뜨기
// 이미지를 누를 때
handlePress = (item) => {
if (this.state.itemIndex.includes(item)) {
const selectItem = this.state.itemIndex.filter(itemIndex => itemIndex !== item);
this.setState({imageLength:this.state.imageLength-1}) //count--
return this.setState({ itemIndex: selectItem })
}
if(this.state.imageLength>4){
alert('이미지는 최대 5장까지 선택할 수 있어요');
return this.setState({imageLength:this.state.imageLength})
}
this.setState({imageLength:this.state.imageLength+1}) //count++
this.setState({ itemIndex: this.state.itemIndex.concat(item)});
}
카메라 Page 부분
✔️ 상품등록에서 받은 imageLength값을 state값 변수로 넣어주기
this.state = {
imageLength:this.props.route.params.imageLength,
}
✔️ 카메라 버튼 터치 되면 count++
🚫 이미지 배열크기가 5이상이면 경고창 뜨기
//카메라 버튼 클릭
onPressButton = async () => {
const photo = await this.camera.current.takeSnapshot({
flash: 'off',
})
if(this.state.imageLength>4){
alert('이미지는 최대 5장까지 선택할 수 있어요');
return this.setState({imageLength:this.state.imageLength})
}
this.setState({imageLength:this.state.imageLength+1}) //count++
this.setState({ imageURLs: this.state.imageURLs.concat('file://' + photo.path) })
}
결과물
728x90
반응형