javascript - 如何在react-native中控制打开/关闭模式

Question

我想在不使用 Redux 的情况下控制“打开和关闭模态”。如果我使用 Redux，我会创建一个变量 isVisible 并通过将值设置为 true 或 false 来控制它。但是，如果我不使用 Redux，我无法解决下面解释的问题。

这是我调用模态函数的代码。

<TouchableOpacity onPress={ () => this.setState({ visibleModal: true ])}>
<Text> Press me! </Text> </TouchableOpacity>

<ProfileModals isVisible={this.state.visibleModal} />

主要模态功能:

  export default class ProfileModals extends Component {

      state = {
        visibleModal: this.props.isVisible,
        modal: "changeName"
      };

render() {

    const {visibleModal} = this.state;

    return (
      <Modal
      isVisible={this.state.visibleModal}
      backdropColor="black"
      backdropOpacity={0.5}
      animationOut="fadeOut"
      onBackdropPress={() => this.setState({ visibleModal: false })}
      swipeDirection={"down"}
      onSwipeComplete={() => this.setState({ visibleModal: false })}
    >
    <View>
      <Text>Hello!</Text>
        </View>
    </Modal>
    );
  }
}

当我第一次按下按钮时，Modal 正确运行。关闭模式后，我第二次按下按钮，它不再运行。因为 this.state.visibleModal 值(在 ProfileModal 组件中)是 false，而不是 this.props.isVisible。

如何解决这个问题？

Answer 1

不要将模态的可见性存储在模态组件的状态中，允许它流经父级的 props，请遵循以下方法:

class Parent extends Component {
  state = {
    modalVisible: false,
  };

  openModal = () => this.setState({ modalVisible: true });
  closeModal = () => this.setState({ modalVisible: false });

  render() {
    const { modalVisible } = this.state;
    return (
      <OtherStuff>
        <Button onPress={this.openModal} />
        <MyModal 
          visible={modalVisible}
          closeModal={this.closeModal} 
        />
      </OtherStuff>
    );
  }
}

class MyModal extends Component {
  render() {
    const { visible, closeModal } = this.props;

    return (
      <Modal isVisible={visible}>
        <Button onPress={closeModal} />
      </Modal>
    );
  }
}