React-Native 之 Modal介紹與使用

時間 2019-11-17

標籤 react native modal 介紹使用欄目 React 简体版

原文原文鏈接

前言

遺漏的經常使用組件，剛發現官方有提供，這邊也來介紹一下。
如本文有錯或理解誤差歡迎聯繫我，會盡快改正更新！
若有什麼問題，也可直接經過郵箱 277511806@qq.com 聯繫我。

本章涉及資源下載：react

連接: https://pan.baidu.com/s/1o84o6JS 密碼: htx6android

屬性

animationType（動畫類型） PropTypes.oneOf(['none', 'slide', 'fade'])
- none：沒有動畫
- slide：從底部滑入
- fade：淡入視野
onRequestClose（被銷燬時會調用此函數）Platform.OS ==='android'？PropTypes.func.isRequired：PropTypes.func
- 在 'Android' 平臺，必需使用此函數
onShow（模態顯示的時候被調用）functionreact-native
transparent (透明度) bool
- true時，使用透明背景渲染模態。
visible（可見性） bool
- 決定模態是否可見
onOrientationChange（方向改變時調用）PropTypes.func
- 在模態方向變化時調用，提供的方向只是 '' 或 ''。在初始化渲染的時候也會調用，可是不考慮當前方向。
supportedOrientations（容許模態旋轉到任何指定取向）PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape'，'landscape-left'，'landscape-right']））
- 在iOS上，模態仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。

modal的使用很普遍，這邊咱們來看看怎麼讓視圖以模態的形式展現：ide

export default class One extends Component {

        // 構造
        constructor(props) {
            super(props);
            // 初始狀態
            this.state = {
                isModal:false
            };
        }

        showModal() {
            this.setState({
                isModal:true
            })
        }

        onRequestClose() {
            this.setState({
                isModal:false
            });
        }

        render() {
            return(
                <View style={styles.container}>
                    {/* 初始化Modal */}
                    <Modal
                        animationType='slide'           // 從底部滑入
                        transparent={false}             // 不透明
                        visible={this.state.isModal}    // 根據isModal決定是否顯示
                        onRequestClose={() => {this.onRequestClose()}}  // android必須實現
                    >
                        <View style={styles.modalViewStyle}>
                            {/* 關閉頁面 */}
                            <TouchableOpacity
                                onPress={() => {{
                                    this.setState({
                                        isModal:false
                                    })
                                }}}
                            >
                                <Text>關閉頁面</Text>
                            </TouchableOpacity>
                        </View>
                    </Modal>

                    {/* 返回按鈕 */}
                    <TouchableOpacity
                        onPress={() => {{
                            this.props.navigator.pop()
                        }}}
                    >
                        <Text>返回</Text>
                    </TouchableOpacity>

                    {/* 模態跳轉 */}
                    <TouchableOpacity
                        onPress={() => this.showModal()}
                    >
                        <Text>模態跳轉</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }

這邊咱們再來作一個常常使用的功能 —— 指示器函數

export default class One extends Component {

        // 構造
        constructor(props) {
            super(props);
            // 初始狀態
            this.state = {
                isModal:false
            };
        }

        showModal() {
            this.setState({
                isModal:true
            })

            setTimeout(() => {
                this.setState({
                    isModal:false
                });
            }, 1500)
        }

        onRequestClose() {
            this.setState({
                isModal:false
            });
        }

        render() {
            return(
                <View style={styles.container}>
                    {/* 初始化Modal */}
                    <Modal
                        animationType='fade'            // 淡入淡出
                        transparent={true}              // 透明
                        visible={this.state.isModal}    // 根據isModal決定是否顯示
                        onRequestClose={() => {this.onRequestClose()}}  // android必須實現
                    >
                        <View style={styles.modalViewStyle}>
                            <View style={styles.hudViewStyle}>
                                <ActivityIndicator style={styles.chrysanthemumStyle}></ActivityIndicator>
                                <Text style={styles.hudTextStyle}>加載中…</Text>
                            </View>
                        </View>
                    </Modal>

                    {/* 返回按鈕 */}
                    <TouchableOpacity
                        onPress={() => {{
                            this.props.navigator.pop()
                        }}}
                    >
                        <Text>返回</Text>
                    </TouchableOpacity>

                    {/* 顯示指示器 */}
                    <TouchableOpacity
                        onPress={() => this.showModal()}
                    >
                        <Text>顯示指示器</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    }