React Native: comment animer les Vues d'être empilées verticalement à horizontalement

Question

Donc, essentiellement, j'ai deux vues empilées verticalement pour démarrer et sur un bouton, elles doivent être animées de sorte que la première vue scoots à gauche et la seconde Voir monte et s'assoit à la droite du premier. Semble assez facile à faire avec le réglage de flex sur le premier View et changer de style haut et gauche sur la deuxième vue, semble très bien sur IOS, cependant sur Android cela cause des problèmes avec la seconde vue coupée en bas quand elle monte (sans doute parce que le flex ou la hauteur de la View n'est pas assez grand pour le contenu, mais malheureusement je ne peux pas changer ça parce que ça dérange le style flex pour le reste du contenu ci-dessous).

Des suggestions sur comment aborder cela?

Cela peut ne pas être possible, mais je me demande s'il existe un moyen, avec LayoutAnimation ou l'API Animated, d'animer ces vues d'une colonne flexDirection à une ligne? Ce serait fou pratique.

Answer 1

LayoutAnimation est merveilleux, les gens! Il suffit de basculer entre «colonne» et «ligne» sur le changement d'état comme souhaité et LayoutAnimation prend soin du reste-super soignée. Voici un exemple simple pour quelqu'un d'autre avec le même problème, elle pourra être utile:

export default class Test extends Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     toggleStyle: 'column', 
 
    } 
 

 
    if(Platform.OS === 'android'){ 
 
     UIManager.setLayoutAnimationEnabledExperimental(true); 
 
    } 
 
    } 
 

 
    _onPress =() => { 
 
    LayoutAnimation.configureNext(CustomLayoutAnimation.position); 
 

 
    let direction = this.state.toggleStyle === 'row' ? 'column' : 'row' 
 
    this.setState({toggleStyle: direction}) 
 
    } 
 

 
    render() { 
 
    return(
 
     <View style={{flex: 1}}> 
 
     <View style={{flex: 1}} /> 
 
     <View style={{flex: 1, flexDirection: this.state.toggleStyle}}> 
 
      <View style={{flex: 1, width:'100%', backgroundColor: 'blue'}} /> 
 
      <View style={{flex: 1, width:'100%', backgroundColor: 'green', justifyContent: 'center', alignItems: 'center'}}><Text onPress={() => this._onPress()}>Toggle</Text></View> 
 
     </View> 
 
     <View style={{flex: 1}} /> 
 
     </View> 
 
    ) 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>