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

var width = require("Dimensions").get('window').width;
var height = require("Dimensions").get('window').height;

export default class ModalExample extends Component {

constructor(props) {
super(props);
this.state = {
modalVisible: false
};
}

setModalVisible(visible) {
this.setState({modalVisible: visible});
}

render() {
return (
<View style={styles.container}>

    <Modal animationType={"slide"} transparent={true} //false彈出整頁(yè)/true彈出浮出窗口
      visible={this.state.modalVisible} onRequestClose={() => {
      alert("Modal has been closed.")
    }}>
      <View style={styles.tView}>
        <View style={styles.Viewone}>
          <View style={styles.ttextView}>
            <Text style={styles.text}>請(qǐng)選擇</Text>
          </View>

          <TouchableHighlight onPress={() => {
            this.setModalVisible(!this.state.modalVisible)
          }} style={styles.textView}>
            <Text style={styles.text}>打開(kāi)相機(jī)</Text>

          </TouchableHighlight>

          <TouchableHighlight onPress={() => {
            this.setModalVisible(!this.state.modalVisible)
          }} style={styles.textView}>
            <Text style={styles.text}>打開(kāi)相冊(cè)</Text>

          </TouchableHighlight>

          <TouchableHighlight onPress={() => {
            this.setModalVisible(!this.state.modalVisible)
          }} style={styles.textView}>
            <Text style={styles.text}>取消</Text>

          </TouchableHighlight>

        </View>
      </View>
    </Modal>

    <ScrollView>
      <View style={styles.photoView}>
        <TouchableOpacity style={styles.imageView} onPress={() => {
          this.setModalVisible(true)
        }}>
          <View style={styles.ImageView}>
            <Image source={require('../image/sczp.png')} style={styles.Image}/>
          </View>
          <Text style={styles.photoTxte}>上傳照片</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>

  </View>
);

}
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff', //#F0F0F0
},
tView: {
width: width,
height: 300,
marginTop: 200,
backgroundColor: "#999"
},
Viewone: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
},
ttextView: {
marginBottom: 30
},
text: {
fontSize: 20
},
textView: {
width: width0.6,
height: 60,
borderTopWidth: 1,
borderColor: "#999",
borderStyle: "solid",
alignItems: "center",
justifyContent: "center"
},
//相冊(cè)整塊View
photo: {
flexDirection: "row",
flexWrap: "wrap",
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "space-between", //space-around
},
//相冊(cè)單個(gè)View
photoView: {
marginBottom: 1,
backgroundColor: "#F0F0F0"
},
imageView: {
width: width0.994 / 3,
height: 120,
borderColor: "#999",
borderStyle: "dashed", //solid-dashed-dotted
borderWidth: 1,
alignItems: "center",
justifyContent: "center"
},
//相冊(cè)圖片
photoImage: {
width: width*0.994 / 3,
height: 120,
alignItems: "center",
justifyContent: "center"
},
ImageView: {
width: 60,
height: 60,
borderRadius: 5,
alignItems: "center",
},
//上傳照片圖片
Image: {
width: 50,
height: 50,
borderRadius: 5,
alignItems: "center",
justifyContent: "center"
},
//上傳照片文字
photoTxte: {
color: "#999",
fontSize: 12
}
});