react-native - 我有一个模式，在加载时可见设置为 true 时有效，但是如果它设置为 false 或者我关闭并重新打开它在 android 上不起作用

Question

我有一个模态的信息轮播。在 Ios 上它可以完美加载并且可以打开和关闭。在 Android 上，如果初始状态设置为 true，它会完美打开，但是当它关​​闭并重新打开时，模式会慢慢淡入并且不存在轮播。

我曾尝试使用 native Modal 和插件。使用 native 关闭按钮和硬件后退按钮不会关闭 android 上的模式。我正在 Galaxy Note 8 上进行测试。

任何帮助将不胜感激，因为我已竭尽全力尝试使其正常运行。

这是模态代码部分。

//MODAL ACTIONS
_openModal = () => {
  this.setState({ isModalVisible: true });
  console.log(this.state.isModalVisible);
  }

_closeModal = () => {
  this.setState({ isModalVisible: false });
  console.log(this.state.isModalVisible);
}

//RENDER MODAL CONTENT
_renderModalContent() {
    return (
      <Modal
        isVisible={this.state.isModalVisible}
        backdropColor={'black'}
        backdropOpacity={0.7}
        onBackButtonPress={this._closeModal}
        >
        <View style={styles.modalContainer}>
          <PersonalityDisplay
            ptData={ptTypes}
            opType={this.props.opType}
          />
          <View style={styles.closeButton}>
            <Button onPress={this._closeModal}>
              Close
            </Button>
          </View>
        </View>
    </Modal>
  )}

renderInfoPanel() {
    return (
      <Animated.View
        style={this.state.position.getLayout()}
        {...this.state.panResponder.panHandlers}
      >
        {this.renderUserInfo()}
        {this._renderMatchStamp()}
        {this._renderSideIcons()}
        {this._renderModalContent()}
      </Animated.View>
    )
  };


  render() {
    console.log(this.state.isModalVisible)
    return (
      <View>
        {this.renderInfoPanel()}
      </View>
    );
  }
}

谢谢

Answer 1

你在代码中最好注意的几件事，

用后退按钮关闭正确的 Prop 是onRequestClose但不是
onBackButtonPress

2.内部 onRequestClose或按钮 onPress应该使用箭头函数
像这样 onRequestClose={() => this._closeModal()}
3. Modal组件没有任何名为 isVisible 的 Prop ，它是
实际上 visible .

纠正这些事情后 Modal工作正常。

除了这些东西，当您发布代码时，请尝试仅发布与您的问题相关的内容。在您的代码中，三个方法和两个样式对象没有任何难以为其他人调试的实现。