React Native使用Modal自定义分享界面
时间:2022-04-27
本文章向大家介绍React Native使用Modal自定义分享界面,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在很多App中都会涉及到分享,React Native提供了Modal组件用来实现一些模态弹窗,例如加载进度框,分享弹框等。使用Modal搭建分析的效果如下:
自定义的分析界面代码如下: ShareAlertDialog.js
/**
* https://github.com/facebook/react-native
* @flow 分享弹窗
*/
import React, {Component} from 'react';
import {View, TouchableOpacity, Alert,StyleSheet, Dimensions, Modal, Text, Image} from 'react-native';
import Separator from "./Separator";
const {width, height} = Dimensions.get('window');
const dialogH = 110;
export default class ShareAlertDialog extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: this.props.show,
};
}
componentWillReceiveProps(nextProps) {
this.setState({isVisible: nextProps.show});
}
closeModal() {
this.setState({
isVisible: false
});
this.props.closeModal(false);
}
renderDialog() {
return (
<View style={styles.modalStyle}>
<Text style={styles.text}>选择分享方式</Text>
<Separator/>
<View style={{flex: 1, flexDirection: 'row', marginTop: 15}}>
<TouchableOpacity style={styles.item} onPress={() => Alert.alert('分享到微信朋友圈')}>
<Image resizeMode='contain' style={styles.image}
source={require('../images/share_ic_friends.png')}/>
<Text>微信朋友圈</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.item}>
<Image resizeMode='contain' style={styles.image}
source={require('../images/share_ic_weixin.png')}/>
<Text>微信好友</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.item}>
<Image resizeMode='contain' style={styles.image}
source={require('../images/share_ic_weibo.png')}/>
<Text>新浪微博</Text>
</TouchableOpacity>
</View>
</View>
)
}
render() {
return (
<View style={{flex: 1}}>
<Modal
transparent={true}
visible={this.state.isVisible}
animationType={'fade'}
onRequestClose={() => this.closeModal()}>
<TouchableOpacity style={styles.container} activeOpacity={1}
onPress={() => this.closeModal()}>
{this.renderDialog()}
</TouchableOpacity>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modalStyle: {
position: "absolute",
top: height - 170,
left: 0,
width: width,
height: dialogH,
backgroundColor: '#ffffff'
},
subView: {
width: width,
height: dialogH,
backgroundColor: '#ffffff'
},
text: {
flex: 1,
fontSize: 18,
margin: 10,
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center'
},
item: {
width: width / 3,
height: 100,
alignItems: 'center',
backgroundColor: '#ffffff'
},
image: {
width: 60,
height: 60,
marginBottom: 8
},
});
当点击某个按钮之后,就会弹出框,示例代码如下:
constructor(props) {
super(props);
this.state = {
showSharePop: false,//分享弹窗,默认不显示
}
}
//省略
onSharePress() {
this.setState({showSharePop: !this.state.showSharePop})
}
//增加点击
<NavigationBar
navigator={this.props.navigator}
popEnabled={false}
style={{backgroundColor: "transparent", position: "absolute", top: 0, width}}
leftButton={ViewUtils.getLeftButton(() => this.props.navigator.pop())}
rightButton={ViewUtils.getShareButton(() => this.onSharePress())}/>
//添加ShareAlertDialog自定义组件
<ShareAlertDialog show={this.state.showSharePop} closeModal={(show) => {
this.setState({showSharePop: show})
}} {...this.props}/>
- CentOS7安装GitLab、汉化、邮箱配置及使用
- Bootstrap源码分析之transition、affix
- Redis从单机到集群,一步步教你环境部署以及使用
- C++内存管理学习堆和栈
- 人人公司宣布收购美国卡车社区平台Trucker Path
- Mysql字符串截取总结:left()、right()、substring()、substring_index()
- c++程序的内存格局
- SpringMVC中利用@InitBinder来对页面数据进行解析绑定
- 门罗盘点:2017年那些AI击败人类的瞬间
- sizeof和strlen的区别
- mysql索引使用技巧及注意事项
- 条码支付新规,微信支付宝还好么?
- 获取对象属性类型、属性名称、属性值的研究:反射和JEXL解析引擎
- 不联网不插U盘也不一定安全 黑客能用声波攻击你的硬盘
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android自定义View验证码输入框
- PHP生成随机字符串实例代码(字母+数字)
- Laravel框架中缓存的使用方法分析
- android实现搜索功能并将搜索结果保存到SQLite中(实例代码)
- Android实现全局右滑返回
- Android实现打地鼠小游戏
- android实现手机传感器调用
- Android实现接近传感器
- PHP 模拟登陆功能实例详解
- PHP判断一个变量是否为整数、正整数的方法示例
- android实现打地鼠游戏
- Yii框架连表查询操作示例
- Android studio listview实现列表数据显示 数据循环显示效果
- 关于Curl在Swoole协程中的解决方案详析
- Flutter随机迷宫生成和解迷宫小游戏功能的源码