react-native Modal使用

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 (

     {
      alert("Modal has been closed.")
    }}>
      
        
          
            请选择
          

           {
            this.setModalVisible(!this.state.modalVisible)
          }} style={styles.textView}>
            打开相机

          

           {
            this.setModalVisible(!this.state.modalVisible)
          }} style={styles.textView}>
            打开相册

          

           {
            this.setModalVisible(!this.state.modalVisible)
          }} style={styles.textView}>
            取消

          

        
      
    

    
      
         {
          this.setModalVisible(true)
        }}>
          
            
          
          上传照片
        
      
    

  
);

}
}

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"
},
//相册整块View
photo: {
flexDirection: "row",
flexWrap: "wrap",
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "space-between", //space-around
},
//相册单个View
photoView: {
marginBottom: 1,
backgroundColor: "#F0F0F0"
},
imageView: {
width: width
0.994 / 3,
height: 120,
borderColor: "#999",
borderStyle: "dashed", //solid-dashed-dotted
borderWidth: 1,
alignItems: "center",
justifyContent: "center"
},
//相册图片
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
}
});

你可能感兴趣的:(react-native Modal使用)