小编给大家分享一下React Native如何使用Modal自定义分享界面，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
在很多App中都会涉及到分享，React Native提供了Modal组件用来实现一些模态弹窗，例如加载进度框，分享弹框等。使用Modal搭建分析的效果如下：
自定义的分析界面代码如下：
ShareAlertDialog.js
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}/>看完了这篇文章，相信你对“React Native如何使用Modal自定义分享界面”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
