Question

我有一个应用，在该应用中，点击用户应该可以取消一些邀请。它与动画一起发生，这几乎是正确的，但在iOS上，某些图像仍在屏幕上。

我以前曾有过animation.view，其中包含了flex = 1的视图。然后动画没有任何作用。我做了一些更改，现在这是我的代码的简化版本：

import React, { Component } from "react";
import { View, Text, Alert, Image, TouchableWithoutFeedback, TouchableHighlight, Animated } from "react-native";
import { Button } from "react-native-elements";
import moment from "moment";

const GETTINGSMALLERDURATION = 350;

class ObserversStripe extends Component {
  state = {
    animatedHeight: null,
    showUpAnimation: false
  };
  //count = 0;
  initialHeight = null;

  animation(fun) {
    Animated.timing(this.state.animatedHeight, {
      toValue: 0,
      duration: GETTINGSMALLERDURATION
      //useNativeDriver: true
    }).start();
    // }).start(fun);
  }

  setHeight(event) {
    if (this.state.animatedHeight) return;
    let { height, width } = event.nativeEvent.layout;
    this.initialHeight = height;

    this.setState({ animatedHeight: new Animated.Value(height) });
  }

  render() {
    return (
      <Animated.View
        style={{ height: this.state.animatedHeight ? this.state.animatedHeight : "auto", backgroundColor: "red" }}
        onLayout={event => {
          this.setHeight(event);
        }}>
        <View
          style={[
            {
              backgroundColor: "transparent",
              //flex: 1,
              width: "100%",
              flexDirection: "row",
              flexGrow: 1
            }
          ]}>
          <View style={{ flex: 9, paddingLeft: 5 }}>
            <Text style={{ fontSize: 13, color: "#000", marginBottom: 10, fontFamily: "Poppins" }}>
              <Text style={{ fontWeight: "bold", fontFamily: "Poppins" }}>{this.props.details.name}</Text>
            </Text>
            <View style={{ width: "100%", flexDirection: "row", marginBottom: 5 }}>
              <View style={{ flex: 6, justifyContent: "center" }}>
                <Text style={{ fontSize: 10, color: "#000", fontFamily: "Poppins" }}>
                  Status: <Text style={{ color: "orange", fontFamily: "Poppins" }}>Invitation pending...</Text>
                </Text>
              </View>
              <View style={{ flex: 3, alignItems: "flex-end" }}>
                <TouchableWithoutFeedback
                  onPress={() =>
                    Alert.alert("Cancel invitation", "Are you sure?", [
                      {
                        text: "Yes",

                        onPress: () => this.animation(() => this.props.unfollow(this.props.details.userID))
                      },
                      { text: "Cancel", style: "cancel" }
                    ])
                  }
                  underlayColor={"#742525"}>
                  <View style={{ flex: 1, alignItems: "center" }}>
                    <Image style={{ width: 15, height: 15 }} source={require("../../assets/icons/aspira_cancel.png")} />
                  </View>
                </TouchableWithoutFeedback>
              </View>
            </View>
          </View>
        </View>
      </Animated.View>
    );
  }
}

export default ObserversStripe;

预期结果：整个条带都被隐藏实际结果：图像留在屏幕上。

具有固定尺寸的元素在动画时不会隐藏

0 个答案: