zoukankan      html  css  js  c++  java
  • [RN] React Native 分享弹窗 ShareAlertDialog

     React Native 分享弹窗 ShareAlertDialog

    ShareAlertDialog.js文件

    /**
     * 分享弹窗
     */
    import React, {Component} from 'react';
    import {View, TouchableOpacity, Alert, StyleSheet, Dimensions, Modal, Text, Image} from 'react-native';
    
    const {width, height} = Dimensions.get('window');
    const dialogH = 150;
    
    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>
    
                    <View style={styles.divide}/>
    
                    <View style={styles.optArea}>
                        <TouchableOpacity style={styles.item} onPress={() => Alert.alert('分享')}>
                            <Image resizeMode='contain' style={styles.image}
                                   source={require('./icon_share_qq.png')}/>
                            <Text style={styles.itemText}>QQ好友</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.item}>
                            <Image resizeMode='contain' style={styles.image}
                                   source={require('./icon_share_wxsession.png')}/>
                            <Text style={styles.itemText}>微信好友</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.item}>
                            <Image resizeMode='contain' style={styles.image}
                                   source={require('./icon_share_wxtimeline.png')}/>
                            <Text style={styles.itemText}>朋友圈</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.item}>
                            <Image resizeMode='contain' style={styles.image}
                                   source={require('./icon_share_qq.png')}/>
                            <Text style={styles.itemText}>复制链接</Text>
                        </TouchableOpacity>
    
                    </View>
    
                    <View style={styles.divide}/>
    
                    <TouchableOpacity style={styles.cancel} onPress={() => this.closeModal()}>
                        <Text style={styles.cancelText}>取消</Text>
                    </TouchableOpacity>
                </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",
            left: 0,
            bottom: 0,
             width,
            flex: 1,
            flexDirection: "column",
            backgroundColor: '#ffffff',
        },
        subView: {
             width,
            height: dialogH,
            backgroundColor: '#ffffff'
        },
        text: {
            flex: 1,
            fontSize: 11,
            paddingTop: 16,
            paddingBottom: 16,
            justifyContent: 'center',
            alignItems: 'center',
            alignSelf: 'center'
        },
        optArea: {
            flex: 1,
            flexDirection: 'row',
            marginTop: 12,
            marginBottom: 12,
        },
        item: {
             width / 4,
            alignItems: 'center',
        },
        itemText: {
            fontSize: 10,
        },
        cancel: {
             width,
            height: 30,
            marginTop: 12,
            alignItems: 'center',
            backgroundColor: '#ffffff'
        },
        cancelText: {
            fontSize: 11,
        },
        image: {
             40,
            height: 40,
            marginBottom: 6,
        },
        divide: {
             width,
            height: 0.5,
            backgroundColor: "#ccc",
        }
    });

    调用代码:

    import React, {Component} from "react";
    import {StyleSheet, Text, TouchableHighlight, View,} from 'react-native';
    import ShareAlertDialog from "./ShareAlertDialog";
    
    export default class TestShareModal extends Component {
        constructor(props) {
            super(props);
            this.state = {
                showSharePop: false,//分享弹窗,默认不显示
            }
        }
    
        _share() {
            this.setState({showSharePop: !this.state.showSharePop})
        }
    
        render() {
            return (
                <View style={{flex: 1}}>
    
                    <TouchableHighlight onPress={() => this._share()} style={styles.button} underlayColor="#a5a5a5">
                        <Text>点击分享</Text>
                    </TouchableHighlight>
    
                    <ShareAlertDialog show={this.state.showSharePop} closeModal={(show) => {
                        this.setState({
                            showSharePop: show
                        })
                    }}/>
                </View>
            );
    
        }
    }
    
    const styles = StyleSheet.create({
        button: {
            margin: 3,
            backgroundColor: 'white',
            padding: 10,
            borderBottomWidth: StyleSheet.hairlineWidth,
            borderBottomColor: '#cdcdcd'
        },
    });

    本博客地址: wukong1688

    本文原文地址:https://www.cnblogs.com/wukong1688/p/10967254.html

    转载请著名出处!谢谢~~

  • 相关阅读:
    jianx vtritualbox 虚拟镜像的体积
    Warning:Configuration 'compile' is obsolete and has been replaced with 'implementation'. It will be
    厉害了,PS大神真的能改变世界!
    厉害了,他用PS不是P照片而是……
    清晰易懂!关于PS入门的超详细笔记!
    如何使用AE来制作烟雾粒子特效
    刷爆外网!中国天才设计师火到日本,30 张神仙海报看完真的服!
    大神你好,可以帮我P张图吗?
    拍照一分钟,修图两小时,PS大神是这样修片的!
    ui设计用什么软件
  • 原文地址:https://www.cnblogs.com/wukong1688/p/10967254.html
Copyright © 2011-2022 走看看