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

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

原文链接：https://www.f2er.com/js/35438.html

React Native使用Modal自定义分享界面的示例代码

猜你在找的JavaScript相关文章