关闭

React Native使用Modal自定义分享界面

标签: native界面app
1894人阅读 评论(2) 收藏 举报
分类:

在很多App中都会涉及到分享,React Native提供了Modal组件用来实现一些模态弹窗,例如加载进度框,分享弹框等。使用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}/>

时间仓促,没有细讲,欢迎留言和交流!!!

0
1
查看评论

React Native之Modal组件实现遮罩层效果

React-Native中Modal的使用 /** * React Native App * dongtao 2017/04/22 * @flow */ import React, { Component } from 'react'; import { AppReg...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-22 18:21
  • 6411

React Native 之 Modal介绍与使用

前言 遗漏的常用组件,刚发现官方有提供,这边也来介绍一下。 如本文有错或理解偏差欢迎联系我,会尽快改正更新! 如有什么问题,也可直接通过邮箱 277511806@qq.com 联系我。 本章涉及资源下载: 链接: https://pan.baidu.com/s/1o84o6JS 密码: ...
  • yeshaojian
  • yeshaojian
  • 2017-03-31 14:53
  • 2333

React Native之Modal实现自定义Dialog

针对普通的弹框,React Native(RN)给我们提供了有Alert,但使用局限性很大,没有办法自定义,要实现自定义的弹框,我们应该如何来实现呢,这里提供两种方法:第一就是native本地来实现,然后暴露给RN来条用,第二就是使用组件Modal来实现,第一种方法这里就不写了,这里讲解下用Moda...
  • jj120522
  • jj120522
  • 2016-07-28 12:24
  • 8022

React Native学习中之modal

今天讲解一下,Modal这个原生控件,还是有不少的坑的。比如我们需要自定义出一些效果 比如下面的图,我们在安卓里面常见的一个控件dialog而已。我们在React Native很容易实现但是我们要进行分装成我们自己经常使用的。那么如下: 其中要注意的地方有几个 地区 1:这个位子是设置成位于使...
  • fox_wei_hlz
  • fox_wei_hlz
  • 2017-04-07 17:11
  • 761

react native Modal 使用详解

Modal 是可以覆盖在原生视图上。 属性: animationType:显示和隐藏的动画 slide:从底部弹出 fade:渐隐渐显 none:无 onRequestClose:android 按返回键时回调。 onShow:modal显示时回...
  • mengks1987
  • mengks1987
  • 2017-05-08 15:59
  • 4304

react-native modal自定义对话框

效果如图: 代码: /** * Created by xq on 16/12/6. */ import React, { Component ,PropTypes} from 'react'; import { Text, View, Touchabl...
  • u014041033
  • u014041033
  • 2016-12-06 17:37
  • 3537

react-native自定义对话框弹出框组件dialogs

介绍:http://www.jianshu.com/p/076ca28f7012 这是一款结合了alert弹出框与confirm弹出框综合的一款组件,可以定义参数改变弹出框的样式以及点击事件等 展示: 使用代码: ...
  • sinat_17775997
  • sinat_17775997
  • 2017-04-07 13:39
  • 2587

从零学React Native之04自定义对话框

之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进行扩展。 当我们点击注册的时候,可以弹出一个对话框,让用户确认一下,如下图:
  • yulianlin
  • yulianlin
  • 2016-08-05 15:41
  • 4177

使用React Native 实现自定义Dialog

前言 最近在项目中的RN模块遇到一个需求,弹出一个Dialog,但是原生的Alert满足不了需求,只能自己去写一个,最后决定使用Modal去实现,话不多说,介绍开始,效果图如下:  1.Modal介绍 Modal视图在iOS原生开发中熟称:"模态视图",Moda...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-21 15:47
  • 1008

React Native自定义组件——弹出框

这里用到的其实是一个新的场景页面 而不是像原生的组件一样 悬浮在页面之上,它实现的原理是从新绘制一个带弹出框样式的页面,除了弹出框之外都是灰色的,且将要显示弹出框页面的布局完全移植过来。理论不多说,直接上代码了 首先弹出框文件  ConfirmDialog.js import React,...
  • JLhaoran
  • JLhaoran
  • 2017-03-22 14:19
  • 684
    本人新书
    个人资料
    • 访问:2225604次
    • 积分:29378
    • 等级:
    • 排名:第207名
    • 原创:763篇
    • 转载:267篇
    • 译文:25篇
    • 评论:395条
    技术公众号
      欢迎关注我的公众号,每天为你推荐最新的博文,与大家一起学习共同进步!
    博客专栏
    站长统计
    微博
    最新评论
    本人新作

    新书