Question

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

在这个应用程序中，我显示一个标题为＆＃34; first＆＃34;只要应用程序在屏幕上呈现。

单击该按钮后，将显示一个模态。此模式包含一个标题为＆＃34; second＆＃34;。

的按钮

目标是将模态隐藏在＆＃34; onPress＆＃34; ＆＃34;第二＆＃34;按钮。

Thsi是我的代码。

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）应用程序成功呈现并显示按钮＆＃34;首先＆＃34;。 c）当＆＃34;第一＆＃34;单击按钮，模式中包含的第二个按钮（＆＃34;第二个＆＃34;）将按预期呈现。 d）但是当第二个＆＃34;单击按钮＆＃34;首先＆＃34;按钮未呈现。

我的理解是在＆＃34; onPress＆＃34;第二次＆＃34;第二次＆＃34;按钮调用下面的回调，改变状态。

 onPress={this.hideModal}

更改该状态（现在为modalVisible = false）后，标题为＆＃34; first＆＃34;将被渲染。但这种情况并没有发生。

有人可以告诉我我做错了吗？

Answer 1

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

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

React Native：关于State和Callback处理程序

1 个答案: