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' }, });
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/10967254.html
转载请著名出处!谢谢~~