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

在很多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.5)',},modalStyle: {
        position: "absolute",top: height - 170,left: 0,width: width,height: dialogH,backgroundColor: '#ffffff'
    },subView: {
        width: width,text: {
        flex: 1,fontSize: 18,margin: 10,justifyContent: 'center',alignItems: 'center',alignSelf: 'center'
    },item: {
        width: width / 3,height: 100,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}/>

时间仓促，没有细讲，欢迎留言和交流！！！