React Native'de 'FameLayout' bileşenini nasıl elde edilir?

Question

Android VieGroup gibi davranan React Native'da bir 'Görünüm' bileşeninin olduğunu biliyorum, LinearLayout olarak çalışmanın ne kadar olası olduğu - çocuklar satır veya sütun halinde düzenleniyor.

'FrameLayout' davranışına nasıl ulaşılacağını merak ediyorum - çocuklar düzende yığılmış ve her çocuğa benzersiz bir yerçekimi yeri atanabilir.

Örneğin: 5 childs'ı bir bileşene koyun, her biri 4 childs öğenin her köşesine hizalanır ve son alt düzen düzenin ortasına hizalanır.

React Native 'render' işlevi nasıl yazılır?

Answer 1

Bu, aşağıdaki konum kullanılarak yapılabilir: 'mutlak' ve üst, sol, sağ, alt özelliklerini hizalayın. İşte bir çalışma örneği rnplay üzerinde Ayrıca

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

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