反應本機如何為兩個視圖並排設置動畫

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

希望能幫助到你。