0
2つのビューを並べてアニメーション化したい。しかし、ビューの高さは私が望むものではありません。私は可視視野の高さを設定したい。ここで 2つのビューを並べてアニメーション化する方法をネイティブに反応させる
は私の問題のビデオです： https://imgur.com/a/se8Vj、ここ博覧会の例である：https://snack.expo.io/ByFSjLt5W
高さは適切ではない、なぜ私は問題を見つけることができません。
私のコンポーネントカードは、このコードを持っている：
<Card
title='LOGIN'
wrapperStyle={{
margin: 0
}}
containerStyle={{
elevation: 20,
margin: 40,
borderWidth:0,
top: -150,
}}
titleStyle={{
textAlign: 'left'
}}
dividerStyle={{
marginTop: 0,
marginBottom: 0
}}
>
<Animated.View
style={{
transform: [{
translateX: this.state.offsetEmail
}]
}}
>
<FormLabel>Email</FormLabel>
<FormInput
focus={true}
placeholder='Email address...'
selectionColor='#fff'
underlineColorAndroid='#0D47A1'
keyboardType='email-address'
onChangeText={(email) => this._setEmail.bind(this)(email)}
/>
{this.state.email.length > 0 &&
<Button
title='weiter'
onPress={() => { Keyboard.dismiss(); this._transitionToPassword(); } }
/>
}
</Animated.View>
<Animated.View
style={{
transform: [{
translateX: this.state.offsetPassword
}]
}}
>
<FormLabel>Email</FormLabel>
<FormLabel>{this.state.email}</FormLabel>
<FormLabel>Password</FormLabel>
<FormInput
secureTextEntry
underlineColorAndroid='#0D47A1'
placeholder='Password...'
onChangeText={(password) => this._setPassword.bind(this)(password)}
/>
</Animated.View>
</Card>
私のコンストラクタ：アニメーション化する
constructor(props) {
super(props);
this.state = {
email: false,
password: false,
showPassword: false,
showSignInButton: false,
offsetEmail: new Animated.Value(0),
offsetPassword: new Animated.Value(width)
};
}
と私の機能：
_transitionToPassword() {
Animated.parallel([
Animated.timing(this.state.offsetEmail, {
toValue: -width
}),
Animated.timing(this.state.offsetPassword, {
toValue: 0
})
]).start();
}
と私幅：
const { width } = Dimensions.get('window');