Absolute и Flexbox в React Native

95

Я хотел бы поставить белую полосу, которая занимала бы всю ширину внизу экрана. Для этого я подумал об использовании 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. Так что любая помощь приветствуется, спасибо :)

javascript css react-native Иланзас
источник

Ответы:

157

Хорошо, решил мою проблему, если кто-то проходит, вот ответ:

Просто пришлось добавить left: 0,и top: 0,к стилям, и да, я устал.

position: 'absolute',
left:     0,
top:      0,
Иланзас
источник
10
Спасибо, что разместили это. Похоже, тоже по высоте - а height:100%не делай top:0, bottom:0.
Premasagar
4
но если вы хотите разместить полосу внизу и на всю ширину, вам следует добавить left:0, right:0, а не добавлять top:0, если вы установите top:0и bottom:0, она будет отображаться в полноэкранном режиме.
Spark.Bao
1
Как я могу центрироваться? Например, я хочу показать счетчик поверх моего компонента, и я хочу, чтобы счетчик был абсолютным и центрированным?
Murat Ozgul
1
Для заполнения всего пространства по вертикали с добавлением дочернего элемента с абсолютным позиционированием top:0и bottom:0работающим в качестве замены для «height: 100%», воспользуйтесь @Premasagar
Ник Пинеда,
1
Jus добавить left, top, rightи bottonк 0 и отлично работает.
jose920405 01
64

Первым шагом было бы добавить

position: 'absolute',

тогда, если вам нужна полная ширина элемента, добавьте 

left: 0,
right: 0,

затем, если вы хотите поместить элемент внизу, добавьте

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

если вы хотите разместить элемент вверху, замените его bottom: 0наtop: 0

Spark.Bao
источник
4

Это решение сработало для меня:

tabBarOptions: {
      showIcon: true,
      showLabel: false,
      style: {
        backgroundColor: '#000',
        borderTopLeftRadius: 40,
        borderTopRightRadius: 40,
        position: 'relative',
        zIndex: 2,
        marginTop: -48
      }
  }
Alex
источник