[RN] React Native 分享弹窗 ShareAlertDialog

Z时代
2024-01-10
分类：综合

react

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: width,
        flex: 1,
        flexDirection: "column",
        backgroundColor: '#ffffff',
    },
    subView: {
        width: 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: width / 4,
        alignItems: 'center',
    },
    itemText: {
        fontSize: 10,
    },
    cancel: {
        width: width,
        height: 30,
        marginTop: 12,
        alignItems: 'center',
        backgroundColor: '#ffffff'
    },
    cancelText: {
        fontSize: 11,
    },
    image: {
        width: 40,
        height: 40,
        marginBottom: 6,
    },
    divide: {
        width: 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'
    },
});