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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
vue双向绑定简要分析
Mar 23 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 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微信支付开发实例
2016/06/22 PHP
PHP ElasticSearch做搜索实例讲解
2020/02/05 PHP
JavaScript Accessor实现说明
2010/12/06 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
vue项目实战总结篇
2018/02/11 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python中return函数返回值实例用法
2020/11/19 Python
python基于opencv 实现图像时钟
2021/01/04 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
编程输出如下图形
2013/11/24 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
进口业务员岗位职责
2014/04/06 职场文书
爱我中华教学反思
2014/04/28 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
运动会口号大全
2014/06/07 职场文书
建筑横幅标语
2014/10/09 职场文书
2014年领班工作总结
2014/11/25 职场文书
辞职书格式样本
2015/02/26 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
python绘制云雨图raincloud plot
2022/08/05 Python