प्रतिक्रिया मूल में 'फेमलेआउट' घटक कैसे प्राप्त करें?

Question

मुझे पता है कि रिएक्ट नेटिव में एक 'व्यू' घटक है जो एंड्रॉइड वीग्रुप जैसे काम करता है, लाइनरलाइट के रूप में काम करने की अधिक संभावना है - बच्चों को पंक्तियों या स्तंभों में व्यवस्थित किया जाता है।

मैं सोच रहा हूं कि 'फ्रेमलाउट' व्यवहार कैसे प्राप्त किया जाए - बच्चों को लेआउट में रखा गया है, और प्रत्येक बच्चे को एक अद्वितीय गुरुत्वाकर्षण स्थान असाइन किया जा सकता है।

उदाहरण के लिए: 5 बच्चों को एक घटक में रखें, 4 में से प्रत्येक बच्चे को लेआउट के प्रत्येक कोने में गठबंधन किया जाता है, और अंतिम बच्चा लेआउट के केंद्र में गठबंधन होता है।

प्रतिक्रियात्मक 'रेंडर' फ़ंक्शन कैसे लिखें?

Answer 1

यह स्थिति का उपयोग करके किया जा सकता है: 'पूर्ण' और इसे शीर्ष, बाएं, दाएं, नीचे गुणों को संरेखित करें। यहाँ एक काम कर नमूना

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

rnplay पर

इसके अलावा, https://rnplay.org/apps/n6JJHg