如何在 react-native 中控制 open/close 模态

Question

我想在不使用 Redux 的情况下控制 'Opening and Closing Modals'。如果我使用 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>
    );
  }
}

如何在 react-native 中控制 open/close 模态

How to control of open/close modal in react-native

javascript

reactjs

react-native

react-native-ios