본문 바로가기
개발/React Native

[react-native] Modal창 예제

Hdev&Shoes 2022. 3. 10. 16:19
728x90

https://github.com/maxjvh/react-native-simple-modal#readme

 

GitHub - maxjvh/react-native-simple-modal: A simple JavaScript modal component for React Native.

A simple JavaScript modal component for React Native. - GitHub - maxjvh/react-native-simple-modal: A simple JavaScript modal component for React Native.

github.com

 

react-native 환경에서 모달 창을 사용할 수 있도록 해주는 라이브러리다

 

 

 

모달이란 ? 

모들 윈도(Modal Window)는 사용자 인터페이스  디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말한다. 

간단히 사용자의 이목을 집중시키기 위해 현재 페이지에서 띄우는 화면이다.

 

예제

 

react-native-simple-modal 라이브러리 설치

 

npm install react-native-simple-modal --save

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 

import Modal from 'react-native-simple-modal';
            <View style={{height: '100%'}}>
....
                <Modal
                    closeOnTouchOutside={false}
                    disableOnBackPress={false}
                    modalStyle={{
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        alignItems: "center"
                        }}
                    overlayStyle ={{
                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
                        flex : 1
                    }}
                    visible={this.state.stepModal}
                    open={this.state.stepModal}
                    useNativeDriver={false}
                    // modalDidClose={}
                >  
// Modal창에 넣을 데이터 Area
                    <View style={{width:100,height:150,backgroundColor:'#fff',borderRadius:20,borderBottomColor:'#dddde2',borderBottomWidth:4}}>
                         <Text>Modal TEST</Text>
                    </View>
                </Modal>
....
            </View>
 cs
 
  

 

728x90

'개발 > React Native' 카테고리의 다른 글

[react-native] Bottom Tab Navigator 페이지 전환 예제 + 상위 컴포넌트 함수전달  (0) 2022.03.16
[react-native] 페이지 리프레쉬(리렌더링) 예제 + 함수형 컴포넌트 useEffect + useIsFocused + 페이지 리로드 데이터 reload + 데이터 렌더링  (0) 2022.03.07
[react-native] LottieView 애니메이션 적용하기  (0) 2022.03.04
[react-native] react-native 라이브러리를 이용한 카카오톡 공유하기  (0) 2022.03.03
[react-native error] Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 해결 방법  (0) 2022.03.03

'개발/React Native' Related Articles

티스토리툴바