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, 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}/>