React Native: Betreffend State und Callback-Handler

Question

So lerne ich immer noch React Native und ich versuche, eine sehr einfache App zu erstellen, um Zustand, Ereignisse in React Native zu verstehen.

Hier in dieser App zeige ich eine Schaltfläche mit dem Titel "zuerst", sobald die App auf dem Bildschirm gerendert wird.

Wenn Sie auf diese Schaltfläche klicken, wird ein Modal angezeigt. Dieses Modal enthält einen Button mit dem Titel "Sekunde".

Ziel ist es, das Modal bei "onPress" der "zweiten" Taste zu verbergen.

Thsi ist mein Code.

import React from 'react'; 
import { StyleSheet, Text, View, Button, Modal } from 'react-native'; 

export default class App extends React.Component { 

constructor(props) { 
    super(props); 
    this.showModal = this.showModal.bind(this); 
} 

state = { 
    modalVisible: false, 
} 

hideModal =() => { 
    console.log("Btnpress pressed"); 
    this.setState({modalVisbile: false}); 
} 

showModal() { 
    console.log("BtnPress1 pressed"); 
    this.setState({modalVisible: true}); 
} 

    render() { 
    return (
     <View style={styles.container}> 
     <Button title="first" 
      onPress={this.showModal} 
      disabled={this.state.modalVisible} /> 
     <Modal 
      animationType= "slide" 
      transparent= {false} 
      visible={this.state.modalVisible} 
     > 
     <Button 
      title="second" 
      onPress={this.hideModal} 
      disabled={!this.state.modalVisible} 
      /> 
     </Modal> 
     </View> 
    ); 
    } 
} 

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

Was

a) Happens Es gibt keine Fehler. b) Die App wird erfolgreich gerendert und zeigt den Button "first" an. c) Wenn die "erste" Schaltfläche geklickt wird, wird die zweite Schaltfläche ("zweite") im Modal wie erwartet dargestellt. d) Aber wenn der "zweite" Knopf angeklickt wird, wird der "erste" Knopf nicht gerendert.

Mein Verständnis ist, dass auf "onPress" -Ereignis auf "zweite" -Taste der unten genannte Rückruf aufgerufen wird, der den Zustand ändert.

onPress={this.hideModal} 

Nach diesen Zustand ändert sich die Schaltfläche Titel „erste“ wird wiedergegeben (die jetzt modalVisible = false wäre). Aber das passiert nicht.

Kann jemand erzählen, was ich falsch mache?

Answer 1

in Ihrem Code falsch geschrieben Sie sichtbar, wenn Sie die Rechtschreibung korrigieren, es sieht aus wie es

hideModal =() => { 
console.log("Btnpress pressed"); 
this.setState({modalVisible: false}); /*you had modalVisbile*/ 
}