使用React Native，如何创建等间距标头？

How can I make a header with 4 equally spaced items in React Native?

如何在React Native中创建包含4个等距项目的标题?

Coming from a web dev background, the following flexbox produces 4 equally spaced items:

来自web dev背景,以下flexbox生成4个等距项:

<html>
<head>
    <style>
      #header {
      display: flex;
            flex: 1;
            flex-direction: "row";
            height: 20px;
        }
        .item {
            flex: 1;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="header">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
</body>
</html>

That HTML produces this:

那个HTML产生了这个:

However, with React Native, the same thing doesn't seem to work:

但是,使用React Native,同样的事情似乎不起作用:

var navbarStyles = StyleSheet.create({
  navbar: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    height: 20
  },
  navbarItem: {
    flex: 1
  }
});

var Navbar = React.createClass({
  render: function() {
    return (
      <View style={navbarStyles.navbar}>
        <View style={navbarStyles.navbarItem}>
          <Text>Item 1</Text>
        </View>
        <View style={navbarStyles.navbarItem}>
          <Text>Item 2</Text>
        </View>
        <View style={navbarStyles.navbarItem}>
          <Text>Item 3</Text>
        </View>
        <View style={navbarStyles.navbarItem}>
          <Text>Item 4</Text>
        </View>
      </View>
    );
  }
});

2 个解决方案

#1

Hi I did the above code and it works fine and gives output like the html example you have given above. And if you need to center align all text instead of the beginning of each subview, you could use alignItems to 'center' at navbaritem.

嗨,我做了上面的代码,它工作正常,并提供输出,如上面给出的html示例。如果您需要居中对齐所有文本而不是每个子视图的开头,您可以使用alignItems在navbaritem中“居中”。

I beleive you are facing the error because of the style of parent view above it. try fixing that. try giving a backgroundcolor to navbar and you will get some idea of issue.

我相信你正面临错误,因为它上面有父视图的样式。试着修复它。尝试给导航栏一个backgroundcolor,你会发现一些问题。

#2

You can do this for parent

您可以为父母执行此操作

parent:{
    flex: 1,
    flexDirection:'row'
}

and then child items

然后是儿童用品

child:{
        flex: 1,
    }

#1