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

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