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模块模式分析
May 16 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
vue实现微信分享功能
Nov 28 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 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调用C#开发的dll类库方法
2014/07/28 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
php-msf源码详解
2017/12/25 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
python和C语言混合编程实例
2014/06/04 Python
python进阶教程之动态类型详解
2014/08/30 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
小学运动会口号
2014/06/07 职场文书
学习礼仪心得体会
2014/09/01 职场文书
住房抵押登记委托书
2014/09/27 职场文书
教师调动申请报告
2015/05/18 职场文书
公诉意见书范文
2015/06/05 职场文书
校运会宣传稿大全
2015/07/23 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书