React-Native 구성 요소 의 Modal 사용 에 대한 자세 한 설명

Modal 구성 요 소 는 React Native 루트 보 기 를 포함 하 는 네 이 티 브 보기(예 를 들 어 UIViewController,Activity)를 덮어 쓸 수 있 으 며,이 를 통 해 커버 효 과 를 구현 할 수 있 습 니 다.
속성
Modal 이 제공 하 는 속성 은:
animation Type(애니메이션 형식)PropTypes.oneOf(['none','slide','fade']
none:애니메이션 이 없습니다.
슬라이드:바닥 에서 미끄러져 들 어 갑 니 다fade:시야 에 담담 하 다onRequestClose(삭 제 될 때 이 함 수 를 호출 합 니 다)
'Android'플랫폼 에서 이 함 수 를 호출 해 야 합 니 다.
onShow(모드 표시 시 호출 됨)
투명(투명도)bool
true 일 때 투명 배경 렌 더 링 모드 를 사용 합 니 다.
visible(가시 성)bool
onOrientationChange(방향 변경 시 호출)
모드 방향 이 변 할 때 호출 되 고 제공 하 는 방향 은'또는'일 뿐이다.렌 더 링 을 초기 화 할 때 도 호출 되 지만 현재 방향 은 고려 하지 않 습 니 다.
supported Orientations(지정 한 취향 으로 모드 회전 허용)['portrait','portrait-upside-down','landscape','landscape-left','landscape-right']
iOS 에서 모드 는 여전히 info.plist 의 UI Supported InterfaceOrientations 필드 에서 지정 한 제한 을 받 습 니 다.
예시
Modal 의 사용 은 매우 간단 합 니 다.예 를 들 어:

<Modal
 animationType='slide'      //       
 transparent={false}       //    
 visible={this.state.isModal}  //   isModal      
 onRequestClose={() => {this.onRequestClose()}} // android    
 >

종합 예:

import React, { Component} from 'react';
import {
  AppRegistry,
  View,
  Modal,
  TouchableOpacity,
  Text
} from 'react-native';
export default class ModalView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
    }
  }
  setModalVisible = (visible)=> {
    this.setState({
      modalVisible: visible
    })
  };
  render(){
    return(
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffaaff'}}>
        <Modal animationType={'none'}
            transparent={true}
            visible={this.state.modalVisible}
            onrequestclose={() => {alert("Modal has been closed.")}}
            onShow={() => {alert("Modal has been open.")}}
            supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
            onOrientationChange={() => {alert("Modal has been OrientationChange.")}}>
          <View style={{flex:1, marginTop: 22, backgroundColor: '#aaaaaa', justifyContent: 'center', alignItems: 'center'}}>
            <View>
              <Text>Hello World!</Text>
              <TouchableOpacity onPress={() => {
                this.setModalVisible(false)
              }}>
                <Text>   Modal</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
        <TouchableOpacity onPress={() => {
          this.setModalVisible(true)
        }}>
          <Text>   Modal</Text>
        </TouchableOpacity>
      </View>
    )
  }
}
AppRegistry.registerComponent('ModalView', ()=>ModalView);

 실행 효과:

modal 의 소스 코드 를 통 해 알 수 있 듯 이 modal 은 절대적 인 포 지 셔 닝 을 사 용 했 기 때문에 modal 이 우리 의 수 요 를 만족 시 키 지 못 할 때 우 리 는 절대적 인 포 지 셔 닝 을 통 해 자신 을 봉인 할 수 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.