React-Native 之 Modal介绍与使用

前言


  • 遗漏的常用组件,刚发现官方有提供,这边也来介绍一下。
  • 如本文有错或理解偏差欢迎联系我,会尽快改正更新!
  • 如有什么问题,也可直接通过邮箱 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>
                );
            }
        }
    
    
model示例效果.gif

总结


  • modal 的源码可以看出,modal 其实就是使用了 绝对定位,所以当 modal 无法满足我们的需求的时候,我们就可以通过 绝对定位 自己来封装一个 modal 了,对吧,时间关系,这边就不讲了,大伙自己试试就可以了。

推荐阅读更多精彩内容