0

初始动画后，我在 textInput 元素顶部有一个图像（徽标）。动画效果很好，并将徽标放在正确的位置

当我打开键盘时，标志停留在同一个地方。但是当我完全填满这些字段时，徽标会向下移动一点并停留在那里。一个

我只面临元素的问题。在我的应用程序的其余部分没有问题。同样，当键盘打开但将字段添加到某个级别时，不会发生此问题

我想也许 textinput 正在改变整体大小，所以我检查了它的样式，但我没有发现这样的东西。它的大小是一样的

我的组件

<View style={loginStyle.container}>
      <Animated.View style={[{ transform: [{ translateY: startValue }] },loginStyle.logoStyle,loginStyle.animatedLogoContainer]}>
        <Image source={logo} style={loginStyle.logoSize} />
        </Animated.View> 

..rest of my code

......

造型

container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
    paddingLeft: "17%",
    paddingRight: "17%",
  },

  logoStyle: {
    flex:1,
    resizeMode: "contain",
    position:"absolute",
    width: "120%",
    top: "30%",
    height:44

  },

  logoSize:{
     resizeMode: "contain",
     width:'100%',
     height:44
  },

  animatedLogoContainer:{
    // position:"relative",
    justifyContent:"center",
    height:44
  }
,

我的 app.json 已经有了

"android": {
      "softwareKeyboardLayoutMode": "pan",
    },

动画代码以防万一

   const startValue = new Animated.Value(220);
  const endValue = -60;
  const duration = 1000;


    Animated.timing(startValue, {
      toValue: endValue,
      duration: duration,
      useNativeDriver: true,
      easing: Easing.linear,
    })
  • 还有其他两个视图具有相同的位置：绝对属性，但它们不会移动。所以这个问题对我来说真的很奇怪*

所有元素都在绝对位置

4

1 回答 1

0

我设法解决了它，但与造型无关

我只是将动画的起始值更改为 useState，问题就不再发生了。任何人都知道为什么这是有效的？？？

// const startValue = new Animated.Value(220);
  const [startValue,changeStartValue]=useState(new Animated.Value(220))
于 2021-06-16T08:51:45.713 回答