react-native modal
1.属性
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字段中指定的限制。
2.modal 基本使用
export default class TestModal 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>
);
}
}
3.modal 使用 —— 指示器
export default class TestModal 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>
);
}
}
效果图
react-native modal的更多相关文章
- react native 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...
- [转] React Native Navigator — Navigating Like A Pro in React Native
There is a lot you can do with the React Native Navigator. Here, I will try to go over a few example ...
- 使用react native制作的一款网络音乐播放器
使用react native制作的一款网络音乐播放器 基于第三方库 react-native-video设计"react-native-video": "^1.0.0&q ...
- React Native 系列(八) -- 导航
前言 本系列是基于React Native版本号0.44.3写的.我们都知道,一个App不可能只有一个不变的界面,而是通过多个界面间的跳转来呈现不同的内容.那么这篇文章将介绍RN中的导航. 导航 什么 ...
- react native 中时间选择插件
npm install react-native-datepicker --save import DatePicker from 'react-native-datepicker'; <Vie ...
- React Native 0.50版本新功能简介
React Native在2017年经历了众多版本的迭代,从接触的0.29版本开始,到前不久发布的0.52版本,React Native作为目前最受欢迎的移动跨平台方案.虽然,目前存在着很多的功能和性 ...
- React Native (一) 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.笔者 ...
- WEB通知和React Native之即时通讯(iOS Android)
WEB通知和React Native之即时通讯(iOS Android) 一,需求分析 1.1,允许服务器主动发送信息给客户端,客户端能监听到并且能接收. 1.2,为了方便同一个系统内的用户可以指定某 ...
- React Native——react-navigation的使用
在 React Native 中,官方已经推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换. react-navigation 主要包括三个组件: StackNavig ...
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
随机推荐
- Java GC日志
JVM 命令:-Xms5m -Xmx20m -XX:+PrintGCDetails -XX:+PrintCommandLineFlags -XX:+UseSerialGC [GC (Allocatio ...
- 【JZOJ 3909】Idiot 的乘幂
题面: 正文: 把题目中的方程组组合在一起就变成了: \(X^{a+c}\equiv b \cdot d (\mod p)\) 那这时,我们假定两个数\(x\)和\(y\),使得: \(ax + cy ...
- 细说C#的ReferenceEquals,Equals和==比较运算符
C# 中有两种不同的相等:引用相等和值相等.值相等是大家普遍理解的意义上的相等:它意味着两个对象包含相同的值.例如,两个值为 2 的整数具有值相等性.引用相等意味着要比较的不是两个对象,而是两个对象引 ...
- java字符流读取文件
package ba; import java.io.*; public class zifuTest { public static void main(String[] args) { FileI ...
- 【 React - 1/100 】React绑定事件this指向问题--改变state中的值
/** * 报错: * Cannot read property 'setState' of undefined * 原因: this指向不一致.btnAddCount中的this 和render中的 ...
- mybatis报错(三)报错Result Maps collection does not contain value for java.lang.Integer解决方法
转自:https://blog.csdn.net/zengdeqing2012/article/details/50978682 1 [WARN ] 2016-03-25 13:03:23,955 - ...
- Python 余弦相似度与皮尔逊相关系数 计算
夹角余弦(Cosine) 也可以叫余弦相似度. 几何中夹角余弦可用来衡量两个向量方向的差异,机器学习中借用这一概念来衡量样本向量之间的差异. (1)在二维空间中向量A(x1,y1)与向量B(x2,y2 ...
- Mysql逻辑架构介绍
总体概览: 和其它数据库相比,MySQL有点与众不同,它的架构可以在多种不同场景中应用并发挥良好作用.主要体现在存储引擎的架构上,插件式的存储引擎架构将查询处理和其它的系统任务以及数据的存储提取相分离 ...
- MySQL参数化有效防止SQL注入
sql语句的参数化,可以有效防止sql注入 注意:此处不同于python的字符串格式化,全部使用%s占位 from pymysql import * def main(): find_name = i ...
- python基础操作---string
#coding:utf-8 var1 = 'Hello World!' print var1[::] print len(var1) print var1[0:len(var1)] print var ...