React Native使用Modal自定义分享界面的示例代码


Posted in Javascript onOctober 31, 2017

在很多App中都会涉及到分享,React Native提供了Modal组件用来实现一些模态弹窗,例如加载进度框,分享弹框等。使用Modal搭建分析的效果如下:

React Native使用Modal自定义分享界面的示例代码React Native使用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}/>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 #Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 #Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 #Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 #Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 #jQuery
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 #Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 #Javascript
You might like
php date与gmdate的获取日期的区别
2010/02/08 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
js实现二级联动简单实例
2020/01/11 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
python构建自定义回调函数详解
2017/06/20 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
python实现图片彩色转化为素描
2019/01/15 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
详解python中eval函数的作用
2019/10/22 Python
Python tkinter常用操作代码实例
2020/01/03 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
《童年》教学反思
2014/02/18 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
mysql中关键词exists的用法实例详解
2022/06/10 MySQL