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 (
      
 选择分享方式
 
 
    alert.alert('分享到微信朋友圈')}>
     
     微信朋友圈
   
   
     
     微信好友
   
   
     
     新浪微博
   
 
      
    )
  }

  render() {

    return (
      
  this.closeModal()}>
    this.closeModal()}>
     {this.renderDialog()}
   
 
      
    );
  }
}

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})
  }
//增加点击
 this.props.navigator.pop())}
   rightButton={ViewUtils.getShareButton(() => this.onSharePress())}/>

//添加SharealertDialog自定义组件
 {
   this.setState({showSharePop: show})
 }} {...this.props}/>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。