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 相关文章推荐
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
VUE JS 使用组件实现双向绑定的示例代码
Jan 10 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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 无限级 SelectTree 类
2009/05/19 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
javascript call和apply方法
2008/11/24 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
详解a++和++a的区别
2017/08/30 Javascript
vue filters的使用详解
2018/06/11 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
浅析Python中的join()方法的使用
2015/05/19 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
深入理解Django-Signals信号量
2019/02/19 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python绘图实现显示中文
2019/12/04 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
keras实现多种分类网络的方式
2020/06/11 Python
python中rc1什么意思
2020/06/19 Python
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
初中成绩单评语
2014/12/29 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
教师节班会开场白
2015/06/01 职场文书