React Native 如何并排设置两个视图的动画

Question

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

这里是世博会的一个例子：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

希望对您有所帮助。

React Native 如何并排设置两个视图的动画

react native how to animate two views side by side

javascript

android

android-animation

reactjs

react-native