反应原生控制的模态冻结

Question

>免责声明：只能在iPhone模拟器ATM上进行测试。反应原生 0.49Mac OSX High Sierra

我想创建一个从父组件获取其道具的模态。如下：

const Modal = ({ showModal, closeModal }) => (
  <Modal
    animationType="slide"
    transparent={false}
    visible={showModal}
    onRequestClose={() => {alert("Modal has been closed.")}}
    >
   <View style={{marginTop: 22}}>
     <Text>Hello World!</Text>
     <TouchableHighlight onPress={() => closeModal() }>
        <Text>Hide Modal</Text>
     </TouchableHighlight>
   </View>
  </Modal>
);

这是父示例：

<View>
  <Modal
    showModal={this.state.showModal}
    closeModal={() => this.setState({ showModal: false })}
  />
  <ScrollView>
      {elements.map(element => {
        return (
          <Card key={element.id}>  
            <Badge onPress={() => this.setState({ showModal: true })>
              <Text>Show</Text>
            </Badge>
          </Card>
        );
      })}
  </ScrollView>
</View>

当我单击显示模态按钮时，模态会

按预期弹出，但是当我单击关闭模态时，模态消失并再次出现，但这次我无法与之交互，UI 似乎被冻结了，我必须重新启动模拟器。

如果我直接从 React-Native 文档中复制并粘贴代码：https://facebook.github.io/react-native/docs/modal.html模态工作正常。不过，它是一个独立的组件。

任何帮助/建议将不胜感激。

问候埃米尔

Answer 1

在从头开始痛苦地重建组件后，我看到有一个意想不到的罪魁祸首：

componentWillUpdate() {
    UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
    LayoutAnimation.easeInEaseOut();
  }

当我删除此代码时，模态工作正常，但是当我重新添加它时，当我尝试关闭时它冻结了。这似乎是iOS中的一些动画冲突无法确认Android。

当我添加 1000 毫秒的超时时，屏幕在再次冻结之前显示更多。

因此，现在，如果有人遇到相同的问题，请查找正在调用的多个动画。

希望这对某人有所帮助，如果您有更好的解决方法，请告诉我。

问候Emir

Answer 2

这是一个已知的问题，与您的代码无关。

看这里： https://github.com/facebook/react-native/issues/16895

Answer 3

确保您的<Modal/>包裹在<View/>中。

Answer 4

很晚了，但最新版本中仍然存在问题，我发现的唯一解决方案是在渲染方法中制作不同的视图。

一个

用于模态，一个用于其他组件。

render() {
    if (showErrorModal) {
      return (
          <ModalError message={message} visible={showErrorModal} handleBack={this.handleBack} />
      );
    }
    return (
        <ScrollView style={{ flex: 1 }}>
          <View style={{ padding: 10, paddingVertical: 20 }}>
            {!active ? this.fieldlabel() : this.fieldSelect()}
          </View>
        // remove this one, do not use here. it will block the UI
        {* <ModalError message={message} visible={showErrorModal} handleBack={this.handleBack} /> *}
        </ScrollView>
    );
  }
}

Answer 5

在父组件中，创建一个函数将showModal设置为 false 。

父母

closeModal = () => {
  this.setState({
    showModal: false
  });
}

然后你需要通过道具把它传给你的Modal。

<Modal showModal={this.state.showModal} closeModal={this.closeModal} />

在Modal内，更改： <TouchableHighlight onPress={() => this.closeModal() }>

自： <TouchableHighlight onPress={closeModal}>

Answer 6

你为什么使用this.closeModal((？使用你从道具中得到的那个，即关闭Modal((。

<TouchableHighlight onPress={() => closeModal() }>