React Native Modal 不显示动画

Question

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

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

我的问题是动画在模态中不起作用。 如果我将值设置为“slideInLeft”，“animationIn”道具不会显示任何变化，“animationOut”道具也不会发生任何变化。

有人知道为什么会这样吗？

      <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>

为了简单起见，我删掉了一些代码。如果您遇到相同的问题，任何修复和支持表示赞赏。

Answer 1

确保将 useNativeDriver 属性设置为 true，如下所示：

<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>

Answer 2

你可以在这个Modal中使用这行代码..

animationType="slide"

此动画道具将有助于将模态视图设置为幻灯片格式。

这对我有帮助，你可以像 as 一样使用这段代码

<Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>

Answer 3

我在这里分享世博小吃链接，请检查它是否有效。我已经为你的问题做了一个演示。

通过它，让我知道。我刚刚更改了你的 props 状态，并根据 TouchableOpacity 更改了它的值。

https://snack.expo.io/SJepmJRtV

Example.js

  export default class App extends React.Component {
  constructor(props) {
  super(props);
  this.state = {visible:false,toggle:false}}
  render() {
    return (
      <View>
      <View>
        <Modal
          isVisible={this.state.visible}
          onBackButtonPress={this.state.toggle}
          animationIn="slideInLeft"
          animationOut="slideOutRight"
        >
          <View style={{width:100,height:200}}>
            <View style={{}}>
              <Text style={{ textAlign: "center", color: "black", 
                fontWeight:"bold" }}>
                Projectbrowser
              </Text>
            <TouchableOpacity style={{width:"10%",height:"10%",backgroundColor:"red",justifyContent:"center",alignItems:"center"}} onPress={()=>this.setState({visible:false})}>
      <Text>Press me</Text>
      </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </View>
      <TouchableOpacity style={{width:"20%",height:"80%",bottom:150,alignItems:"center"}} onPress={()=>this.setState({visible:true})}>
      <Text>Press me</Text>
      </TouchableOpacity>
      </View>
     );
   }
 }