反應本地如何並排動畫兩個視圖

我想並排動畫兩個視圖。但是觀點的高度並不是我想要的。我想設置可見視圖的高度。反應本地如何並排動畫兩個視圖

這裏是世博會的一個例子：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');

來源

2017-09-15 Evolutio

您的視圖呈現爲一個在另一個之下。在應用動畫之前，您應該首先修復您的風格，使它們並排呈現。您可以使用flex: 1，flexDirection: row和overflow: hidden來嘗試實現它。

檢查文檔有關的造型和柔性佈局更加提示：https://facebook.github.io/react-native/docs/flexbox.html

希望它能幫助。

來源

2017-09-15 20:23:37 soutot

反應本地如何並排動畫兩個視圖

回答

相關問題