在键盘模式下键入时 React Native 中奇怪的布局行为

Question

在初始 animation.the 动画工作正常并将徽标放在正确位置后，我在 textInput 元素顶部有一个图像（徽标）

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

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

我想也许 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,
    })

还有其他两个视图具有相同的 position:absolute 属性但它们不会移动。所以这个问题对我来说真的很奇怪 *

所有元素都处于绝对位置

Answer 1

我设法解决了它，但与样式无关

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

// const startValue = new Animated.Value(220);
  const [startValue,changeStartValue]=useState(new Animated.Value(220))

在键盘模式下键入时 React Native 中奇怪的布局行为

weird layout behavior in react native when typing in keyboard mode

react-native

react-native-android

react-native-flexbox

react-native-ios

react-native-stylesheet