React native 如何独立地对每个孩子进行（左、右、中）对齐？

在这方面，我有：

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

这就是我得到的效果：

这就是我想要的效果：

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

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

与此类似，但react native似乎不支持

边距：“auto”

。此外，只有在您只关心左右对齐的情况下，其他答案才有效，但没有人在没有自动边距的情况下真正解决中心对齐问题

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

（来源：）

---

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

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

{'如果您正在使用Navigator模块中的导航栏，请参见我的问题：
您还可以将
marginLeft:'auto'
设置为中间组件。它应该将其推到右侧。也适用于React Native

来源：
使用此

marginLeft: "auto",
marginRight: "auto"

谢谢。我仍在学习flex属性的行为。我实现了你的解决方案，但我感到困惑，因为我忘记了flexDirection默认值为列，所以我编辑了你的答案。谢谢。是的。你是对的。现在更容易理解。已批准。但是
样式在哪里。文本
？我找不到它。你可以删除它或添加到样式中Ejecti进行了痛苦的调试，然后我意识到我没有把
flex:1
，它在我把它放进去后就可以工作了。。我想知道为什么
flex:1
，它有什么神奇之处？具体在哪里？它有什么作用？就像前面提到的问题一样，margin auto在React Native中不起作用。
marginLeft: "auto",
marginRight: "auto"