React Native Modal 不显示动画

Question

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

我正在使用 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

您可以在此模态中使用这行代码..

animationType="slide"

这个动画道具将有助于将模态视图动画化为幻灯片格式。

这对我有帮助，您可以像这样使用此代码

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

Answer 3

我在这里分享世博会小吃链接，请检查它是否有效。 我已经对你的问题进行了演示。

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

https://snack.expo.io/SJepmJRtV

例子.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>
     );
   }
 }