如何证明每个孩子（左，右，中）的独立性？ [英] How to justify (left, right, center) each child independently?

问题描述

 < View style = {styles.navBar}> 
<文字> {'<'}< / Text> 
< Text style = {styles.navBarTitle}> 
健身&营养跟踪
< / Text> 
<图片来源= {图标}风格= {styles.icon} /> 
< / View> 
  

这些款式：

  {
 navBar：{
 height：60，
 flexDirection：'row'，
 justifyContent：'space-between'，
 alignItems ：'center'，
}，
 navBarTitle：{
 textAlign：'center'，
}，
 icon：{
 height：60，
 resizeMode：'contains'，
}，
} 
  

是我得到的效果：

这是我想要的效果：

在第一个例子中，项目之间的间隔是相等的。

在第二个例子中，每个项目都有不同的理由。第一项是左对齐的。第二项是中心对齐的。第三，右对齐。

我如何做类似的事情？我主要关心的是居中。一种方法是对3个不同的区域使用嵌套View（flex containers）并设置flex：1到左右区域

 < View style = {styles.navBar}> ; 
< View style = {styles.leftContainer}> 
< Text style = {[styles.text，{textAlign：'left'}]}> 
 {'<'} 
< / Text> 
< / View> 
< Text style = {styles.text}> 
健身&营养跟踪
< / Text> 
< View style = {styles.rightContainer}> 
< View style = {styles.rightIcon} /> 
< / View> 
< / View> 
 
 const styles = StyleSheet.create（{
 navBar：{
 height：60，
 flexDirection：'row'，
 justifyContent：'space-之间'，
 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：'contains'，
 backgroundColor：'white'，
} 
}）; 
  

In react native I have:

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

with these styles:

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

This is the effect I get:

This is the effect I want:

In the first example, the spacing between items is equal.

In the second example, each item is justified differently. The first item is left-justified. The second item is center-justified. The third, right-justified.

This question is similar, but it looks like react native does not support margin: 'auto'. Furthermore, the other answers only work if you only care about left and right justification, but no one really addresses center justification without auto margin.

I am trying to make a navigation bar in react native. The vanilla ios version looks like this:

How do I do something similar? I'm mainly concerned with centering.

解决方案

One way is to use nested View (flex containers) for 3 different regions and set flex:1 to left and right region

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

这篇关于如何证明每个孩子（左，右，中）的独立性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！