সম্পূর্ণ প্রতিক্রিয়া নেটিভ মধ্যে সম্পূর্ণ এবং ফ্লেক্সবক্স

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

আমি সিএসএসে স্টাইলিংয়ে নতুন এবং সমস্ত বৈশিষ্ট্য প্রতিক্রিয়া-নেটিভে উপলব্ধ নয়। তাই কোনও সাহায্য প্রশংসা করা হয়, ধন্যবাদ :)

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
      }
  }