Question

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

来自web开发背景，以下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>

HTML产生了这个：

然而，使用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>
    );
  }
});

Answer 1

您好我做了上面的代码，它工作正常，并提供输出，如上面给出的html示例。如果您需要将所有文本居中对齐而不是每个子视图的开头，则可以使用alignItems来对齐＆＃39; center＆＃39;在navbaritem。

我相信你因为上面的父视图风格而面临错误。试着修复它。尝试给navbar一个backgroundcolor，你会发现问题。

Answer 2

您可以为父母

执行此操作

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

然后是子项目

child:{
        flex: 1,
    }

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

2 个答案: