ReactNative: 使用第三方庫模態對話框組件react-native-modal

一、簡介

react-native-modal是一個增強的，動畫的和可定制的react-native模態對話框開源組件，它提供的API比較豐富，基本可以滿足開發中需要的各種對話彈框，它附帶遮罩層以模態的形式彈出。使用它友好地為用戶提供消息展示，是一個不錯的選擇。

 

二、安裝

1、npm install xxx --save

npm install react-native-modal --save

2、react-native link xxx

react-native link react-native-modal

 

三、屬性

這個模態對話框組件提供的屬性比較多，如下所示：

//對話框動畫顯示方式，默認slideInUp
animationIn: string;

//對話框動畫顯示需要的時間，默認300ms
animationInTiming: number;

//對話框動畫隱藏方式，默認slideOutDown
animationOut: string;

//對話框動畫隱藏需要的時間，默認300ms
animationOutTiming: number;

//是否啟用避免鍵盤遮擋屬性, 啟動后，不會遮擋輸入框
avoidKeyboard: boolean;

//是否鋪滿整個屏幕
coverScreen: boolean;

//是否顯示遮罩層
hasBackdrop: boolean;

//遮罩層背景顏色
backdropColor: string;

//遮罩層透明度
backdropOpacity: number;

//遮罩層顯示需要的時間，默認300ms
backdropTransitionInTiming: number;

//遮罩層隱藏需要的時間，默認300ms
backdropTransitionOutTiming: number;

//支持自定義遮罩層
customBackdrop: null;

//是否使用原生的驅動
useNativeDriver: boolean;

//設備高度（在可以隱藏導航欄的設備上很有用）
deviceHeight: null;

//設備寬度（在可以隱藏導航欄的設備上很有用）
deviceWidth: null;

//是否當動畫時隱藏模態內容
hideModalContentWhileAnimating: boolean;

//是否允許滑動事件傳播到子組件（例如，模態中的ScrollView）
propagateSwipe: boolean;

//是否可見
isVisible: boolean;

//當模態動畫完全顯示時觸發該回調
onModalShow: () => null;

//當模態動畫將要顯示時觸發該回調
onModalWillShow: () => null;

//當模態動畫完全隱藏時觸發該回調
onModalHide: () => null;

//當模態動畫將要隱藏時觸發該回調
onModalWillHide: () => null;

//當點擊遮罩層區域時觸發該回調
onBackdropPress: () => null;

//當點擊遮罩層上按鈕時觸發該回調
onBackButtonPress: () => null;

//掃動閾值，默認100。達到時會觸發onSwipeComplete函數
swipeThreshold: number;

//掃動方向
swipeDirection: string;

//開始掃動時觸發該回調
onSwipeStart:func;

//掃動移動時觸發該回調
onSwipeMove: func;

//掃動完成時觸發該回調
onSwipeComplete: func;

//掃動取消時觸發該回調
onSwipeCancel: func;

//組件風格樣式
style: any ;

//滾動到指定位置
scrollTo: null;

//滾動多少偏移
scrollOffset: number;

//滾動的最大偏移
scrollOffsetMax: number;

//是否允許水平滾動
scrollHorizontal: boolean;

//支持的設備方向
supportedOrientations: string[];

 

四、使用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text
} from 'react-native';

import Modal from 'react-native-modal';

export default class RNApplyComponent extends Component {

    //初始化state
    constructor(props){
        super(props);
        this.state = {visible: false};
    }

    //顯示
    show(){
        this.setState({
            visible: true
        });
    }

    //隱藏
    hide(){
        this.setState({
            visible: false
        });
    }

    //彈框
    _renderModal() {
        return (
            <Modal
                isVisible={true}
                animationIn={'bounceInUp'}
                backdropColor={'red'}
                backdropOpacity={0.4}
                onBackdropPress={() => this.hide()}
                onModalWillShow={() => { console.log("---onModalWillShow---")}}
                onModalShow={() => { console.log("---onModalShow---")}}
                onModalWillHide={() => { console.log("---onModalWillHide---")}}
                onModalHide={() => { console.log("---onModalHide---")}}
            >
                <View style={[styles.center]}>
                    <View style={[styles.parent,styles.center]}>
                        <Text style={styles.content}>歡迎您的到來</Text>
                    </View>
                </View>
            </Modal>
        )
    }

    /*
    遇到的問題：不知道為啥我的Modal無法通過isVisible控制它的顯示和隱藏。我去github社區的issues上看到過相同的問題
    https://github.com/react-native-community/react-native-modal/issues/295，但是並沒有解決方案。
    我猜測是我的react-native版本過低導致的(本人版本0.44.3,多次升級失敗，就沒折騰了)。所以我這邊目前解決方法就是通過三目運算符解決，
    但是隱藏時的動畫就無法表現出來了。如果有能解答疑惑的，歡迎下面流言，非常感謝。

        <Modal isVisible={this.state.visible} onBackdropPress={() => this.hide()}>
            <View style={[styles.center]}>
                <View style={[styles.parent,styles.center]}>
                    <Text style={styles.content}>歡迎您的到來</Text>
                </View>
            </View>
        </Modal>
    */


    render() {

        return (
            <View style={[styles.container,styles.center]}>
                <Text style={styles.content} onPress={() => this.show()}>show</Text>
                {
                    this.state.visible ?  this._renderModal() : null
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    parent: {
        width:300,
        height:200,
        backgroundColor:'#FFFFFF',
        borderRadius:10
    },
    content: {
        fontSize: 25,
        color: 'black',
        textAlign: 'center'
    }
});

AppRegistry.registerComponent('RNApplyComponent', () => RNApplyComponent);