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

【问题标题】：How to control of open/close modal in react-native如何在 react-native 中控制打开/关闭模式
【发布时间】：2019-08-03 21:20:21
【问题描述】：

我想在不使用 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。

我该如何解决这个问题？

【问题讨论】：

标签： javascript reactjs react-native react-native-ios

【解决方案1】：

不要将模态组件的可见性存储在模态组件的状态中，让它流过父级的道具，遵循这种方法：

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

【讨论】：