react native學習筆記24——Modal實作自定義彈出對話框

前言

上一篇文章介紹React Native系統提供的兩個彈出框的api——Alert與AlertIOS，Alert可以在雙平台通用，但是隻能展示資訊量有限功能單一的文本對話框。AlertIOS比Alert稍微豐富一點，可以展示供使用者輸入的對話框，但隻能在iOS中使用。但是如果我們想在Android平台實作帶輸入框的提示框呢？或者有需求要定制功能更複雜的對話框，如帶多選項的對話框？這時我們可以通過調用原生平台api來實作自己的需求。不過這裡幸好React Native提供一個元件——Modal 可以讓我們很友善的實作對話框的效果。本文将介紹通過Modal實作自定義彈出對話框。

Modal

Modal元件可以用來覆寫包含React Native根視圖的原生視圖（如UIViewController，Activity）。在嵌入React Native的混合應用中可以使用Modal，可以使應用中用RN開發的那部分内容覆寫在原生視圖上顯示。

Modal的屬性方法

屬性	類型	描述
animationType	enum(‘none’, ‘slide’, ‘fade’)	動畫效果類型
transparent	bool	控制是否透明
visible	bool	控制是否顯示
onShow	function	Modal顯示時調用該方法
onRequestClose	function	Modal被銷毀時調用該方法
onOrientationChange(iOS)	function	方向改變時調用
supportedOrientations(iOS)	function	允許Modal旋轉到任何指定取向,其值為 ‘portrait’, ‘portrait-upside-down’, ‘landscape’，’landscape-left’，’landscape-right’

在Android平台

onRequestClose

是必要方法，用于處理實體傳回鍵的響應。

在iOS平台

supportedOrientations

仍然受

info.plist

中的

UISupportedInterfaceOrientations

字段所指定的限制。

使用執行個體

下例通過Modal實作了自定義的帶輸入框的彈出框，在android和ios兩個平台上均可使用。

import React, { Component } from 'react';
import {
    Modal,
    Text,
    TouchableHighlight,
    TouchableOpacity,
    View ,
    StyleSheet,
    Image,
    TextInput} from 'react-native';
let Dimensions = require('Dimensions');
let screenWidth = Dimensions.get('window').width;
let dialogWidth = screenWidth-;
export default class ModalExample extends Component {

    constructor(props) {
        super(props);
        this.state = {modalVisible: false};
    }

    setModalVisible(visible) {
        this.setState({modalVisible: visible});
    }
    onClose() {
        this.setState({modalVisible: false});
    }
    render() {
        return (
            <View style={{marginTop: 22}}>
                <Modal
                    animationType={"slide"}
                    transparent={true}
                    visible={this.state.modalVisible}
                    onRequestClose={() => {this.setModalVisible(false)}}
                >
                    <TouchableOpacity style={{flex:1}} onPress={this.onClose.bind(this)}>
                    <View style={styles.container}>
                        <View style={styles.innerContainer}>
                            <Text>Title</Text>
                            <TextInput
                                style={styles.inputtext}
                                placeholder="Type here!"
                            />
                            <View style={styles.btnContainer}>
                                <TouchableHighlight onPress={() => {
                                    this.setModalVisible(!this.state.modalVisible)
                                }}>
                                    <Text  style={styles.hidemodalTxt}>關閉</Text>
                                </TouchableHighlight>
                            </View>
                        </View>
                    </View>
                    </TouchableOpacity>
                </Modal>

                <TouchableHighlight onPress={() => {
                    this.setModalVisible(true)
                }}>
                    <Text>彈出對話框</Text>
                </TouchableHighlight>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        padding: 40,
        backgroundColor: 'rgba(0, 0, 0, 0.5)'
    },
    innerContainer: {
        borderRadius: 10,
        alignItems: 'center',
        backgroundColor: '#fff',
        padding: 20

    },
    btnContainer:{
        width:dialogWidth,
        borderTopWidth:1,
        borderTopColor:'#777',
        alignItems:'center'
    },
    inputtext:{
        width:dialogWidth-20,
        margin:10,
    },
    hidemodalTxt: {
        marginTop:10,
    },
});
           

效果如下：

從上例可以看出Modal的使用方法很簡單，以下是其在使用過程中比較關鍵的三個點。

1 .自定義布局

<Modal  
              animationType={"slide"}
              transparent={true}
              visible={this.state.modalVisible}
              onRequestClose={() => {this.setModalVisible(false)}}>
            ...
       </Modal>
           

在省略的地方可根據你的需求實作任意自定義布局。這裡需要注意的是， Modal 是覆寫整個螢幕的，形成半透明遮罩狀态的效果需要在最外層上面設定其背景為半透明：

2 .點選空白處關閉

如果要實作點選空白處關閉對話框的效果可以在Modal的最外層加上觸屏事件的監聽,修改Modal的visible屬性為false即可控制其關閉。

<Modal
          animationType={"slide"}
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => {this.setModalVisible(false)}}
          >
         <TouchableOpacity style={{flex:1}} onPress={this.onClose.bind(this)}>
          ...
         </TouchableOpacity>
    </Modal>
...
 onClose() {
        this.setState({modalVisible: false});
 }
           

3 .android手機按實體傳回鍵關閉Modal,

在onRequestClose方法中通過修改Modal的visible屬性為false即可控制其關閉。具體實作同2。

結語

通過Modal實作自定義對話框可同時适配Android、iOS雙平台。在最開始我提到過實作自定義對話框還有另一種方法——通過調用原生平台api。對于某些功能可能React Native還沒有相應的子產品包裝，這時我們通常的做法就是通過調用原生元件，然後經過特定的封裝來達到效果，下一節将介紹如何使用React Native調用原生子產品。