TIL 11주 1일차-react native project

모달창 만들기

import { Modal } from "react-native"

import styled from "@emotion/native"

import { useState } from "react"

import { Rating } from "react-native-ratings"

export default function ReviewModal({isOpenModal, setIsOpenModal}) {

    const [modalContent, setModalContent] = useState('');

    const [ratings, setRatings] = useState(0);

    const getRatings = (rating) => { setRatings(rating) };

    return(

        <Modal visible={isOpenModal} transparent animationType='slide'>

            <Backdrop>

                <ModalBackImg>

                    <ModalView>

                        <ModalTitle>평가</ModalTitle>

                        <Rating

                            startingValue={0}

                            style={{alignItems: 'flex-start' }}

                            onFinishRating={getRatings}

                            ratingCount={5}

                            imageSize={30}

                            tintColor='#22AFFC'

                        />

                        <ModalTitle>내용</ModalTitle>

                        <ContentInput value={modalContent} onChangeText={(text) => setModalContent(text)} />

                    </ModalView>

                    <Row>

                    <ModalBtn onPress={()=>setIsOpenModal(false)} title='취소'>

                        <CancleBtn>취소</CancleBtn>

                    </ModalBtn>

                    <ModalBtn>

                        <AddBtn>추가</AddBtn>

                    </ModalBtn>

                    </Row>

                </ModalBackImg>

            </Backdrop>

        </Modal>

    )

}

const Backdrop = styled.View`

    flex: 1;

    justify-content: center;

    align-items: center;

`

const ModalBackImg = styled.View`

    background-color: #22AFFC;

    width: 80%;

    height: 70%;

    padding: 20px;

    justify-content: space-between;

    border-radius: 5px;

`

const ModalView = styled.View`

`

const ModalTitle = styled.Text`

    font-size: 20px;

    font-weight: 600;

    color: black;

    margin-top: 20px;

    margin-bottom: 10px;

`

const ContentInput = styled.TextInput`

    background-color: white;

    border-radius: 5px;

    padding: 10px;

    min-height: 200px;

`

const Row = styled.View`

    flex-direction: row;

    margin-bottom: 10px;

    justify-content: space-between;

    align-items: flex-start;

`;

const ModalBtn = styled.TouchableOpacity`

`

const CancleBtn = styled.Text`

    font-size: 20px;

    color: red;

`

const AddBtn = styled.Text`

    font-size: 20px;

    color: black;

`

모달창이 되는 컴포넌트를 만들어주고

 

import { StyleSheet } from 'react-native';

import styled from '@emotion/native';

import { SCREEN_HEIGHT } from '../util';

import { LinearGradient } from 'expo-linear-gradient';

import ReviewCard from '../components/MusicalDetail/ReviewCard';

import { useState } from 'react';

import ReviewModal from '../components/Reviews/ReviewModal';

export default function MusicalDetail({navigation: {navigate}}) {

  const [isOpenModal, setIsOpenModal] = useState(false)

  const addreview = () => {

    setIsOpenModal(true)

  }

  return (

    <Container>

   .......................................................

      <Review>

        <ReviewCard />

      </Review>

      <ReviewModal isOpenModal={isOpenModal} setIsOpenModal={setIsOpenModal} />

    </Container>

  );

}

모달창컴포넌트가 들어가는 페이지에 state를 남겨준다. ->

const [isOpenModal, setIsOpenModal] = useState(false)

  const addreview = () => {

    setIsOpenModal(true)

  }