Question

我有一个简单的动画图像，该图像在键盘打开时会缩小，在键盘关闭时会缩小。我这样做是为了防止在登录屏幕上滚动，但是现在其他组件不再跟随该图像。我究竟做错了什么？我正在使用react-native-easy-grid 代码：

export default class AnimatedImage extends Component<Props> {
  constructor(props) {
    super(props);
    this.animatedValue = new Animated.Value(1);
  }
  componentWillMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      "keyboardDidShow",
      this._keyboardDidShow
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      "keyboardDidHide",
      this._keyboardDidHide
    );
  }
  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }
  _keyboardDidShow = () => {
    Animated.spring(this.animatedValue, {
      toValue: 0.5
    }).start();
  };
  _keyboardDidHide = () => {
    Animated.spring(this.animatedValue, {
      toValue: 1,
      friction: 3,
      tension: 40
    }).start();
  };

  render() {
    const width = Dimensions.get("window").width;
    return (
      <Animated.Image
        source={require("../../../assets/ic_splash.png")}
        resizeMode="center"
        style={{
          borderColor: "#000",
          borderWidth: 1,
          width: "100%",
          height: 200,
          transform: [{ scale: this.animatedValue }]
        }}
      />
    );
  }
}

我在这里叫它

<Grid>
<KeyboardAwareScrollView>
<Grid>
            <Col style={{ alignItems: "center",justifyContent:"flex-start" }}>
            <AnimatedImage/>

....OTHER COMPONENTS...
</Col>
</Grid>
</KeyboardAwareScrollView>
</Grid>

谢谢！

Answer 1

经过一些研究，我设法用LayoutAnimation代替了Animate.Image。这是可以正常工作的代码：

export default class AnimatedImage extends Component<Props> {
  state = { keyboardState: "closed" };
  constructor(props) {
    super(props);
    this.animatedValue = new Animated.Value(1);
  }
  componentWillMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      "keyboardDidShow",
      this._keyboardDidShow
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      "keyboardDidHide",
      this._keyboardDidHide
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }
  _keyboardDidShow = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    this.setState({ keyboardState: "opened" });
  };
  _keyboardDidHide = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    this.setState({ keyboardState: "closed" });
  };

  render() {
    const width = Dimensions.get("window").width;
    return (
      <View
        style={{
          width: "100%",
          height: this.state.keyboardState == "closed" ? 200 : 100
        }}
      >
        <Image
          style={{
            width: "100%",
            height: this.state.keyboardState == "closed" ? 200 : 100
          }}
          resizeMode="center"
          source={require("../../../assets/ic_splash.png")}
        />
      </View>
    );
  }
}

我认为它很简单。

其他组件未跟随动画图像

1 个答案: