रिएक्टिव नेटिव में एब्सोल्यूट और फ्लेक्सबॉक्स

Question 1

मैं एक सफेद पट्टी रखना चाहूंगा जो स्क्रीन के निचले भाग में सभी चौड़ाई ले। ऐसा करने के लिए मैंने absoluteविरासत में मिले flexboxमापदंडों के साथ स्थिति का उपयोग करने के बारे में सोचा ।

निम्नलिखित कोड के साथ यह कुछ इस तरह प्रस्तुत करता है ।

यहाँ मेरा कोड है:

var NavigationBar = React.createClass({
  render: function() {
    return(
    <View style={navigationBarStyles.navigationBar}>
      //Icon 1, Icon 2...
    </View>
    );
  }
});

var Main = React.createClass({
  render: function() {
    return(
      <View style={mainStyles.container}>
          <NavigationBar />
      </View>
    );
  }
});

var mainStyles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#456783',
  }
});

var navigationBarStyles = StyleSheet.create({
  navigationBar: {
    backgroundColor: '#FFFFFF',
    height: 30,
    position: 'absolute', 
    flexDirection: 'row',
    bottom: 0,
    justifyContent: 'space-between'
  },
});

मैं CSS में स्टाइल करने के लिए नया हूँ और सभी गुण React-Native में उपलब्ध नहीं हैं। तो किसी भी मदद की सराहना की है, धन्यवाद :)

Question 2

ठीक है, मेरी समस्या हल कर दी, अगर कोई भी यहाँ से गुजर रहा है तो इसका जवाब है:

बस शैलियों में left: 0,और जोड़ना था top: 0,, और हां, मैं थका हुआ हूं।

position: 'absolute',
left:     0,
top:      0,

Question 3

पहला कदम जोड़ना होगा

position: 'absolute',

फिर यदि आप तत्व को पूर्ण चौड़ाई चाहते हैं, तो जोड़ें

left: 0,
right: 0,

फिर, यदि आप तत्व को नीचे रखना चाहते हैं, तो जोड़ें

bottom: 0,
// don't need set top: 0

यदि आप शीर्ष पर तत्व की स्थिति करना चाहते हैं, की जगह bottom: 0सेtop: 0

Question 4

इस समाधान ने मेरे लिए काम किया:

tabBarOptions: {
      showIcon: true,
      showLabel: false,
      style: {
        backgroundColor: '#000',
        borderTopLeftRadius: 40,
        borderTopRightRadius: 40,
        position: 'relative',
        zIndex: 2,
        marginTop: -48
      }
  }