react native Modal使用以及封装
来源:互联网 发布:mac 远程桌面 右键 编辑:程序博客网 时间:2024/06/05 22:47
本章涉及资源下载:
属性
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的使用很广泛,这边我们来看看怎么让视图以模态的形式展示:
- 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
modal 使用 —— 指示器
这边我们再来做一个经常使用的功能 —— 指示器
- 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
总结
- 从 modal 的源码可以看出,modal 其实就是使用了 绝对定位,所以当 modal 无法满足我们的需求的时候,我们就可以通过 绝对定位 自己来封装一个 modal 了,对吧,时间关系,这边就不讲了,大伙自己试试就可以了。
阅读全文
1 0
- react native Modal使用以及封装
- react-native modal封装
- react-native Modal使用
- react native Modal 使用详解
- React Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- react-native Modal的学习与使用
- React-Native 之 Modal介绍与使用
- React-Native 之 Modal介绍与使用
- React Native使用Modal自定义分享界面
- react-native-modal-alert
- React Native 自定义modal
- React Native Modal踩坑
- React-Native 组件之 Modal的使用详解
- react-native modal自定义对话框
- react native Modal 实现ActionSheet
- React-Native 组件之 Modal
- React-Native Fetch使用Promise封装(一)
- 校验同一时间只能存在一个起点到终点的数据,如何判断(时间,起点,终点)
- Java项目前后端分离-springmvc配置html视图解析器
- ubuntu 截图大全
- Android中featuredrecyclerview的使用
- 指向指针数据的指针
- react native Modal使用以及封装
- iOS NSMutableAttributedString 实现富文本
- Android studio Build APK报transformClassesWithDexForDebug问题
- Java关键字—final
- NO.1初识Objective-C
- #define用法总结
- ACdream 1154 Lowbit Sum (数位dp)
- 在Keil中做stm32的软件仿真,查看输出PWM波形时,在逻辑分析仪中规定IO口signal,出现"unknow signal"
- oracle 11g 新特性Pivot 和 Unpivot