Question

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

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

我的问题是动画无法在模式中使用。如果我将值设置为“ slideInLeft”，则“ animationIn”道具不会显示任何更改。

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

      <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

确保将true设置为useNativeDriver道具，例如：

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

此动画道具将有助于将模式视图动画化为Slide formate。

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

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

Answer 3

我在这里分享博览会零食链接，请检查它是否有效。我已经演示了您的问题。

仔细研究一下，让我知道。我刚刚更改了您的道具的状态，并根据 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>
     );
   }
 }

React Native Modal不显示动画

3 个答案: