反应本机如何为两个视图并排设置动画

Question

我要同时为两个视图设置动画。 但是意见的高度并不是我想要的。 我想设置可见视图的高度。

这是我的问题的视频： 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');

Answer 1

您的视图在另一个视图下呈现。 在应用动画之前，您应该首先固定样式以使其并排渲染。 您可以使用flex: 1 ， flexDirection: row和overflow: hidden以尝试实现它。

检查文档以获取有关样式和弹性布局的更多提示： https : //facebook.github.io/react-native/docs/flexbox.html

希望能帮助到你。