ReactNative: 使用模態組件Modal組件

一、簡介

在iOS端切換控制器的方式大致有三種，分別是導航、標簽、模態，在ReactNative中也有這三種方式可以實現。在前面的文章中已經實現了用導航和標簽切換頁面，同樣地，RN中也有一個模態組件Modal組件來進行頁面的切換。

 

二、API

Modal組件提供的屬性不多，但是都比較常用，現在來分析一下每一個屬性用法，如下所示：

//模態的動畫過渡方式 
//none: 無效果
//slide：滑動效果
//fade：漸入漸出效果
animationType: PropTypes.oneOf(['none', 'slide', 'fade']),

//確定您的模態是否會填充整個視圖。 將其設置為“ true”將在透明背景上渲染模態。
transparent: PropTypes.bool

//控制是否對底層窗口強制進行硬件加速
hardwareAccelerated: PropTypes.bool

//模態的頁面是否可見
visible: PropTypes.bool

//當用戶點擊硬件后退按鈕時，將調用onRequestClose回調。區分平台使用
onRequestClose: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func

//模態頁面顯示時調用
onShow: PropTypes.func

//模態的動畫過渡方式 , 已過時，被屬性animationType取代
animated: deprecatedPropType(
      PropTypes.bool,
      'Use the `animationType` prop instead.'
    )

//支持的屏幕旋轉方向
supportedOrientations: PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']))

//當屏幕旋轉時調用
onOrientationChange: PropTypes.func

 

三、使用

可以看出API比較簡單，現在簡單實現一下，注意Modal組件內部需要嵌套一個頁面View，示例如下：

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

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    TouchableHighlight,
    Modal
} from 'react-native';


export default class ReactNativeDemo extends Component {

    //默認模態視圖不可見
    state = {
      modalVisible: false,
    };

    //修改模態視圖可見性
    setModalVisible(visible) {
        this.setState({modalVisible: visible});
    }

    render() {
        return (
            <View style={[styles.flex,styles.show_bgColor,styles.center]}>
                <Modal
                    animationType={"slide"}
                    transparent={false}
                    visible={this.state.modalVisible} >
                    
                    <View style={[styles.flex,styles.hide_bgColor,styles.center]}>
                        <View>
                            <TouchableHighlight onPress={() => { this.setModalVisible(!this.state.modalVisible)}}>
                                <Text style={{fontSize:20,color:'white'}}>Hide Modal</Text>
                            </TouchableHighlight>
                         </View>
                    </View>
                </Modal>

                <TouchableHighlight onPress={() => { this.setModalVisible(true) }}>
                    <Text style={{fontSize:20,color:'white'}}>Show Modal</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    show_bgColor: {
      backgroundColor: 'green'
    },
    hide_bgColor: {
        backgroundColor: 'red'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center',
    }
});

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