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

希望它有所帮助。

本机如何反复动画两个视图

1 个答案: