react native Modal使用以及封装

最新推荐文章于 2023-08-07 14:54:19 发布

九幽神君

最新推荐文章于 2023-08-07 14:54:19 发布

阅读量3k

点赞数 1

分类专栏： react native 文章标签： react native Modal

本文链接：https://blog.csdn.net/qq_34161388/article/details/73603609

版权

react native 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本章涉及资源下载：

属性

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的使用很广泛，这边我们来看看怎么让视图以模态的形式展示：

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

   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

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

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

   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

model示例效果.gif

总结

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

九幽神君

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react native Modal使用以及封装

本章涉及资源下载：属性animationType（动画类型） PropTypes.oneOf([‘none’, ‘slide’, ‘fade’])none：没有动画slide：从底部滑入fade：淡入视野onRequestClose（被销毁时会调用此函数）Platform.OS ===’Android’？PropTypes.func.
复制链接

扫一扫