如何独立地为每个孩子辩护（左，右，中）？

Question

在本地反应中，我有：

<View style={styles.navBar}>
  <Text>{'<'}</Text>
    <Text style={styles.navBarTitle}>
      Fitness & Nutrition Tracking
    </Text>
  <Image source={icon} style={styles.icon}/>
</View>

有这些风格：

{
    navBar: {
        height: 60,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    navBarTitle: {
        textAlign: 'center',
    },
    icon: {
        height: 60,
        resizeMode: 'contain',
    },
}

这是我得到的效果：

这就是我想要的效果：

在第一个示例中，项目之间的间距相等。

在第二个示例中，每个项目的对齐方式不同。第一项是左对齐的。第二项是中心对齐的。第三，右对齐。

This question类似，但看起来本机反应不支持margin: 'auto'。此外，如果您只关心左右对齐，那么其他答案才有效，但没有人真正解决没有汽车保证金的中心理由。

我正在尝试制作一个反应原生的导航栏。 vanilla ios版本看起来像这样：

我该如何做类似的事情？我主要关心的是居中。

Answer 1

一种方法是对3个不同的区域使用嵌套的View（flex容器），并将flex：1设置为左右区域

<View style={styles.navBar}>
  <View style={styles.leftContainer}>
    <Text style={[styles.text, {textAlign: 'left'}]}>
      {'<'}
    </Text>
  </View>
  <Text style={styles.text}>
    Fitness & Nutrition Tracking
  </Text>
  <View style={styles.rightContainer}>
    <View style={styles.rightIcon}/>
  </View>
</View>

const styles = StyleSheet.create({
  navBar: {
    height: 60,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'blue',
  },
  leftContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: 'green'
  },
  rightContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: 'red',
  },
  rightIcon: {
    height: 10,
    width: 10,
    resizeMode: 'contain',
    backgroundColor: 'white',
  }
});

Answer 2

如果您使用Navigator模块中的NavigationBar，请参阅我的问题：Changing the default style for a Navigator.NavigationBar (title)

Answer 3

您还可以将marginLeft: 'auto'设置为中间部分。它应该将其向右推。也适用于React Native

来源：https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

Answer 4

使用此

marginLeft: "auto",
marginRight: "auto"