React Native Modal 不显示动画

问题描述

所以在我的应用程序中，我有一个工作模态，显示可见性是否设置为 true.它也可以正确关闭并且一切正常(除了错误，如果您重新加载模拟器并且 Modal 处于打开状态，它会保持打开状态并且您无法关闭它).

So in my App, I have a working Modal that shows if the visibility is set to true. It also closes correctly and everything works fine(except the bug where if you reload the emulator and the Modal is open it stays open and you can't close it).

我正在使用 react-native-modal 包.

I am using react-native-modal package.

我的问题是动画在模态中不起作用.如果我将值设置为例如slideInLeft"，则animationIn"道具不会显示任何更改，animationOut"道具也不会更改任何内容.

My problem is that the animations don't work in the Modal.The "animationIn" prop doesn't show any change if I set the value for example to "slideInLeft" neither does the "animationOut" prop change anything.

有谁知道为什么会这样?

Does anyone know why that could be?

      <View>
        <Modal
          isVisible={this.props.visible}
          onBackButtonPress={this.props.toggle}
          animationIn="slideInLeft"
          animationOut="slideOutRight"
        >
          <View style={modalStyle.container}>
            <View style={modalStyle.headerText}>
              <Text style={{ textAlign: "center", color: "black",
                fontWeight:"bold" }}>
                Projectbrowser
              </Text>
            </View>

           { SOME MORE CODE IN BETWEEN HERE }

          </View>
        </Modal>
      </View>

为了简单起见，我删掉了一些代码.如果您遇到相同的问题，我们将不胜感激.

I cut out some code to keep it simple. Any fixes and upvotes if you encountered the same issue are appreciated.

推荐答案

确保设置为 true 以使用 NativeDriver 道具，像这样:

make sure to set true to useNativeDriver props, Like this:

<View>
  <Modal
          isVisible={this.props.visible}
          onBackButtonPress={this.props.toggle}
          animationIn="slideInLeft"
          animationOut="slideOutRight"
          useNativeDriver={true} // try adding This line
        >
       <View style={modalStyle.container}>
          <View style={modalStyle.headerText}>
             <Text style={{ textAlign: "center", color: "black",
                fontWeight:"bold" }}>
                Projectbrowser
             </Text>
          </View>

        { SOME MORE CODE IN BETWEEN HERE }

      </View>
  </Modal>
</View>

这篇关于React Native Modal 不显示动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！