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

来源：互联网发布：广州pm2.5实时数据编辑：程序博客网时间：2024/06/06 09:41

在很多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