如何證明（左，右，中間）每個孩子獨立？

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'。此外，其他答案只適用於如果你只關心左右對齊，但沒有人真正解決沒有自動保證金的中心理由。

我想在原生反應中製作一個導航欄。香草IOS版本是這樣的：

我如何做同樣的事情？我主要關注定心。

Answer 1

一種方法是使用嵌套的視圖（Flex容器）3點不同的區域，並設置柔性：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

如果您正在使用導航欄從導航模塊看到我的問題：Changing the default style for a Navigator.NavigationBar (title)