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 相关文章推荐
javascript 内存回收机制理解
Jan 17 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
日期 时间js控件
2009/05/07 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python实现保存网页到本地示例
2014/03/16 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
在python中实现对list求和及求积
2018/11/14 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
初中生自我评价
2014/02/01 职场文书
运动会通讯稿150字
2014/02/15 职场文书
学生手册评语
2014/05/05 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技