大佬教程收集整理的这篇文章主要介绍了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 (
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
},});
当点击某个按钮之后，就会弹出框，示例代码如下：
//省略
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自定义分享界面的示例代码全部内容，希望文章能够帮你解决React Native使用Modal自定义分享界面的示例代码所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。