React Native：关于状态和回调处理程序

Question

所以我仍在学习 React Native，我正在尝试构建一个非常简单的应用程序来理解 React Native 中的状态和事件。

在这个应用程序中，我会在应用程序呈现在屏幕上时立即显示一个标题为 "first" 的按钮。

单击该按钮后，将显示一个模式。此模式包含一个标题为 "second".

的按钮

objective是在"second"按钮的"onPress"上隐藏模态。

这是我的代码。

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',
  },
});

会发生什么

a) 没有错误。 b) 应用程序渲染成功并显示按钮"first"。 c) 单击 "first" 按钮时，模态中包含的第二个按钮 ("second") 将按预期呈现。 d) 但是当 "second" 按钮被点击时 "first" 按钮没有被渲染。

我的理解是，在 "second" 按钮上发生 "onPress" 事件时，将调用下面的回调来更改状态。

 onPress={this.hideModal}

更改该状态（现在为 modalVisible = false）后，将呈现标题为 "first" 的按钮。但这并没有发生。

谁能告诉他们我做错了什么？

Answer 1

在您的代码中，您拼错了 visible，如果您更正拼写，它看起来会起作用

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

React Native：关于状态和回调处理程序

React Native : Regarding State and Callback handlers

reactjs

react-native

expo