Come ottenere il componente "FameLayout" in React Native?

Question

So che esiste un componente 'Visualizza' in React Native che si comporta come Android VieGroup, tuttavia è più probabile che funzioni come LinearLayout - i bambini sono disposti in righe o colonne.

Mi chiedo come ottenere il comportamento di "FrameLayout": i bambini sono impilati nel layout e ad ogni bambino può essere assegnata una posizione di gravità unica.

Ad esempio: Inserire 5 child in un componente, ciascuno di 4 childs allineati a ciascun angolo del layout e l'ultimo child sono allineati al centro del layout.

Come scrivere la funzione 'rendering' React Native?

Answer 1

Questo può essere fatto usando la posizione: 'assoluto' e allinearlo in alto, a sinistra, a destra, in basso. Ecco un esempio di lavoro

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
} = React; 

var SampleApp = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
       <Text style={styles.topLeft}> Top-Left</Text> 
       <Text style={styles.topRight}> Top-Right</Text> 
     <Text>Center</Text> 
     <Text style={styles.bottomLeft}> Bottom-Left</Text> 
     <Text style={styles.bottomRight}> Bottom-Right</Text> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    marginTop: 24 
    }, 
    topLeft:{ 
    position: 'absolute', 
    left: 0, 
    top: 0 
    }, 
    topRight:{ 
    position: 'absolute', 
    right: 0, 
    top: 0 
    }, 
    bottomLeft:{ 
    position: 'absolute', 
    left: 0, 
    bottom: 0 
    }, 
    bottomRight:{ 
    position: 'absolute', 
    right: 0, 
    bottom: 0 
    } 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp); 

Anche su rnplay, https://rnplay.org/apps/n6JJHg