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,
    })
  • 同じ position:absolute プロパティを持つ他の 2 つのビューもありますが、いずれも移動しません。この問題は私にとって本当に非常に奇妙です*

すべての要素は絶対位置にあります

4

1 に答える 1