Wie erreicht man 'FameLayout' Komponente in React Native?

Question

Ich weiß, dass es eine "View" -Komponente in React Native gibt, die sich wie Android VieGroup verhält, jedoch eher als LinearLayout funktioniert - Kinder sind in Zeilen oder Spalten angeordnet.

Ich frage mich, wie man 'FrameLayout' Verhalten erreichen kann - Kinder sind im Layout gestapelt, und jedem Kind kann eine eindeutige Gravitationsstelle zugewiesen werden. B. Beispiel: Setzen Sie 5 Childs in eine Komponente, jedes von 4 Childs wird an jeder Ecke des Layouts ausgerichtet, und das letzte Kind wird auf die Mitte des Layouts ausgerichtet.

Wie schreibe ich React Native 'render' Funktion?

Answer 1

Das kann mit position: 'absolute' gemacht werden und richten Sie es oben, links, rechts, unten Eigenschaften. Hier ist ein funktionstüchtiges Beispiel

'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); 

Auch auf rnplay, https://rnplay.org/apps/n6JJHg