import React, {Component} from 'react';
import {Modal,View,Text,TouchableOpacity,Image,StyleSheet} from 'react-native';


export default class ModalContent extends Component {

    constructor(props) {
        super(props);//这一句不能省略，照抄即可
        this.state = {
            animationType: 'fade',//none slide fade
            modalVisible: false,//模态场景是否可见
            transparent: true,//是否透明显示
        };
    }
    render() {

        return <Modal
            animationType={this.state.animationType}
            transparent={this.state.transparent}
            visible={this.state.modalVisible}
            onRequestClose={() => {
                this._setModalVisible(false)
            }}
            onShow={this.startShow} 
        >
            <TouchableOpacity style={styles.modalContainer} onPress={() => {
                    this._setModalVisible(false)
                  }}>
                <TouchableOpacity activeOpacity={1} style={styles.modalContent} onPress={() => {
                   return
                  }}>
                  <View style={styles.modalTitle}>
                    <Text>我的二维码</Text>
                  </View>
                  <View style={styles.operationButton}>
                    <TouchableOpacity style={styles.operationButtonSpace}>
                      <View style={styles.operationButtonImgContainer}>
                        <Image style={styles.operationButtonImg} source={require('../static/img/transmit.png')}/>
                      </View>
                      <Text style={styles.operationButtonText}>当前页面不可转发</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.operationButtonSpace}>
                      <View style={styles.operationButtonImgContainer}>
                        <Image style={styles.operationButtonImg} source={require('../static/img/home.png')}/>
                      </View>
                      <Text style={styles.operationButtonText}>回到首页</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.operationButtonSpace}>
                      <View style={styles.operationButtonImgContainer}>
                        <Image style={styles.operationButtonImg} source={require('../static/img/star.png')}/>
                      </View>
                      <Text style={styles.operationButtonText}>添加到我的小程序</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.operationButtonSpace}>
                      <View style={styles.operationButtonImgContainer}>
                        <Image style={styles.operationButtonImg} source={require('../static/img/desktop.png')}/>
                      </View>
                      <Text style={styles.operationButtonText}>添加到桌面</Text>
                    </TouchableOpacity>
                  </View>
                  <View style={styles.operationButton}>
                    <TouchableOpacity style={styles.operationButtonSpace}>
                      <View style={styles.operationButtonImgContainer}>
                        <Image style={styles.operationButtonImg} source={require('../static/img/annulus.png')}/>
                      </View>
                      <Text style={styles.operationButtonText}>浮窗</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.operationButtonSpace}>
                      <View style={styles.operationButtonImgContainer}>
                        <Image style={styles.operationButtonImg} source={require('../static/img/setting.png')}/>
                      </View>
                      <Text style={styles.operationButtonText}>设置</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.operationButtonSpace}>
                      <View style={styles.operationButtonImgContainer}>
                        <Image style={styles.operationButtonImg} source={require('../static/img/complaint.png')}/>
                      </View>
                      <Text style={styles.operationButtonText}>反馈与投诉</Text>
                    </TouchableOpacity>
                  </View>
                  <TouchableOpacity style={styles.modalCancleButton} onPress={() => {
                    this._setModalVisible(false)
                  }}>
                    <Text>取消</Text>
                  </TouchableOpacity>
                </TouchableOpacity>
            </TouchableOpacity>
        </Modal>
    }

    _setModalVisible = (visible) => {
        this.setState({modalVisible: visible});
    }
    startShow = () => {
     //   alert('开始显示了');
    }


}

const styles = StyleSheet.create({
  modalContainer:{
    flex:1,
    justifyContent:'flex-end',
    backgroundColor:'rgba(0, 0, 0, 0.5)'
  },
  modalContent:{
    backgroundColor:'#ddd',
    borderTopLeftRadius:5,
    borderTopRightRadius:5
  },
  modalTitle:{
    height:60,
    borderBottomWidth:1,
    borderBottomColor:'#ccc',
    justifyContent:'center',
    marginLeft:10,
  },
  operationButton:{
    flexDirection:'row',
    justifyContent:'flex-start',
    marginTop:10,
    flexWrap:'wrap',
    paddingBottom:10,
    borderBottomWidth:1,
    borderBottomColor:'#ccc',
  },
  operationButtonSpace:{
    marginLeft:10,
    marginTop:10
  },
  operationButtonImgContainer:{
    width:60,
    height:60,
    alignItems:'center',
    justifyContent :'center',
    borderRadius:15,
    backgroundColor:'#fff'
  },
  operationButtonImg:{
    width:20,
    height:20
  },
  operationButtonText:{
    alignItems:'center',
    textAlign :'center',
    width:60,
    marginTop:10,
    fontSize:12
  },
  modalCancleButton:{
    alignItems:'center',
    justifyContent :'center',
    backgroundColor:'#fff',
    height:40
  }
});