javascript modale反应原生

Posted 2021-05-03

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'red'
  },
});

export default class App extends Component {
  state = {
    modalVisible: false,
  }
  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }
toto = () => {
    console.log("toto");
}
  render() {
    return (
      <>
        {
          this.state.modalVisible &&(
              <Modal
                transparent
                onRequestClose={() => this.toto()}
                animationType="slide"
                visible={this.state.modalVisible}
               >

                <View style={{flex:1}}>
                  <TouchableOpacity style={{flexGrow:6}} onPress={() => this.setModalVisible(false)} />
                  <View style={{backgroundColor:'white',flexGrow:1,justifyContent: 'space-around' }} onPress={() => this.setModalVisible(false)} >
                    <Text style={{fontWeight:'600'}}>Modifier le post</Text>
                    <Text  style={{fontWeight:'600'}} >Supprimer le post</Text>
                  </View>
                </View>
              </Modal>
          )

        }
        <View style={styles.container}>
          <Text style={{fontSize: 40}} onPress={ () => this.setModalVisible(true)}>{this.state.modalVisible?'close':'open'}</Text>
        </View>

      </>
    )
  }
}