javascript - Absolute and Flexbox in React Native - Stack Overflow

admin管理员组

文章数量:1134591

I would like to put a white bar which would take all of the width at the bottom of the screen. To do so I thought about using absolute positioning with the inherited flexbox parameters.

With the following code it renders something like this.

Here is my code :

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

I'm new to styling in CSS and not all the properties are available in React-Native. So any help is appreciated, thanks :)

I would like to put a white bar which would take all of the width at the bottom of the screen. To do so I thought about using absolute positioning with the inherited flexbox parameters.

With the following code it renders something like this.

Here is my code :

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

I'm new to styling in CSS and not all the properties are available in React-Native. So any help is appreciated, thanks :)

• javascript
• css
• react-native

Share Improve this question Follow edited Feb 12, 2020 at 7:53 Evgenii Klepilin 69511 gold badge88 silver badges2121 bronze badges asked Apr 9, 2015 at 14:56 ilansasilansas 6,09966 gold badges2222 silver badges2828 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 215

Ok, solved my problem, if anyone is passing by here is the answer:

Just had to add left: 0, and top: 0, to the styles, and yes, I'm tired.

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

The first step would be to add

position: 'absolute',

then if you want the element full width, add

left: 0,
right: 0,

then, if you want to put the element in the bottom, add

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

if you want to position the element at the top, replace bottom: 0 by top: 0

This solution worked for me:

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

本文标签： javascriptAbsolute and Flexbox in React NativeStack Overflow