最初のアニメーションの後、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 つのビューもありますが、いずれも移動しません。この問題は私にとって本当に非常に奇妙です*
すべての要素は絶対位置にあります