时间戳

首页 > 解决方案 > 在键盘模式下键入时反应原生的奇怪布局行为

react-native - 在键盘模式下键入时反应原生的奇怪布局行为

问题描述

初始动画后，我在 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,
    })

所有元素都在绝对位置

标签： react-nativereact-native-androidreact-native-iosreact-native-flexboxreact-native-stylesheet

解决方案

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

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

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

推荐阅读