React-Native 之 Modal介绍与使用

Z时代
2024-01-10
分类：综合

react

前言

遗漏的常用组件，刚发现官方有提供，这边也来介绍一下。

如本文有错或理解偏差欢迎联系我，会尽快改正更新！

如有什么问题，也可直接通过邮箱 277511806@qq.com 联系我。

本章涉及资源下载：
链接: https://pan.baidu.com/s/1o84o6JS 密码: htx6

属性

animationType（动画类型） PropTypes.oneOf(['none', 'slide', 'fade'])
- none：没有动画
- slide：从底部滑入
- fade：淡入视野

onRequestClose（被销毁时会调用此函数）Platform.OS ==='android'？PropTypes.func.isRequired：PropTypes.func
- 在 'Android' 平台，必需使用此函数

onShow（模态显示的时候被调用）function

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 基本使用

modal的使用很广泛，这边我们来看看怎么让视图以模态的形式展示：

	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>
	        );
	    }
	}

modal 使用 —— 指示器

这边我们再来做一个经常使用的功能 —— 指示器

	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>
	        );
	    }
	}