如何独立地为每个孩子正名（左、右、中）？

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

这是我得到的效果：

这就是我想要的效果：

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

在第二个示例中，每个项目的对齐方式不同。第一项左对齐。第二项是居中对齐。第三，正确的解释。

这个问题类似，但看起来react native不支持边距：“auto”。此外，只有在您只关心左右对齐的情况下，其他答案才有效，但没有人在没有自动边距的情况下真正解决中心对齐问题。

我试图在react native中创建一个导航栏。香草ios版本如下所示：

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

Answer 1

如果您正在使用Navigator模块中的NavigationBar，请参阅我的问题：更改Navigator的默认样式。导航栏（标题）

Answer 2

您还可以将边际左：自动设置为中间组件。它应该把它推到右边。也为React Native工作

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

Answer 3

一种方法是对3个不同的区域使用嵌套视图（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',
  }
});