6주차 리액트네이티브

이미지를 선택 할 수있는 라이브러리

import * as ImagePicker from 'expo-image-picker';

사진을 선택하여 나열하는 logic

const defalAlbum = {
    id:1,
    title:"기본",
}
const [images,setImages] = useState([]); useState 이미지들의 초기값을 빈배열로 세팅

 if (!result.canceled) {
        const lasatId = images.length === 0 ?0:images[images.length-1].id +1;
        const newImages =
        {   
            id:lasatId ,
            uri:result.assets[0].uri
        }
        setImages([...images,newImages]);// ...spread를 사용하여 images에  새로운 new Images의 객체를 전달한다.
      }
    };

사진을 삭제하는 로직

const deleteImage = (imageid)=>{
       Alert.alert("이미지를 삭제하시겠어요?","",[
           {
               text:"네",onPress:()=>{
                   const newImages = images.filter((image)=> image.id !== imageid);
                   setImages(newImages);//images를 filter하여 image 와 선택한 이미지가 다른것만 images에 저장하는 로직이다.
               }
           },
           {
           text:"아니오"
           }
               
       ]);
   }

display의 width 혹은 height을 불러오는 클래스

import {Dimensions} from 'react-native';
const width = Dimensions.get("screen").width;
const height = Dimensions.get("screen").height;

Modal 다른 화면을 위에 덮어 씌워서 표현하는 방식이다.
visible의 값이 true이면 보여주고 false이면 보여주지 않는다.
transparent가 true이면 자식 compoent의 View의 배경을 투명하게한다. 즉, 전에 렌더링된 View가 보인다. false면 View의 배경을 default 처리한다.

Modal은 자식 component를 한개만 가져야 한다.

import { Modal, View ,SafeAreaView, TextInput, KeyboardAvoidingView,Pressable} from "react-native"
import { Platform } from "react-native"

export default ({modalVisible,albumTitle,setAlbumTitle,onSubmitEditing,onPressBackDrop}) =>{
    return(
        <View>
            <Modal
                animationType="fade"
                transparent={true}
                visible={modalVisible}>

                <KeyboardAvoidingView
                    behavior={Platform.OS ==="ios" ? "padding" : "height"}
                    style={{flex:1}}>
                        
                        <Pressable style={{flex:1}} onPress={onPressBackDrop}>

                            <SafeAreaView style={{
                                width:"100%",
                                position:"absolute",
                                bottom:0}}>
                            
                                <TextInput 
                                    style={{
                                        width:"100%",padding:10,
                                        borderWidth:0.5,
                                        borderColor:"lightgrey",
                                        backgroundColor:"white"
                                        }}
                        
                                    placeholder="앨범명을 입력하세요"
                                    value={albumTitle}//완료된 결과 값
                                    onChangeText={setAlbumTitle}
                                    onSubmitEditing={onSubmitEditing}
                                    autoFocus={true}/>
                        </SafeAreaView> 
                    </Pressable>
                </KeyboardAvoidingView>
            </Modal>
        </View>
        )
}