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

问题描述

在本机反应中，我有:

<文字>{'<'}</文字><文本样式={styles.navBarTitle}>健身&营养追踪</文本><图片来源={icon} style={styles.icon}/></查看>

具有这些样式:

<代码>{导航栏:{身高:60，flexDirection: '行',justifyContent: '间隔',alignItems: '中心',},导航栏标题:{文本对齐:'居中'，},图标: {身高:60，调整大小模式:'包含'，},}

这是我得到的效果:

这是我想要的效果:

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

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

_(来源:

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:

_{(source: apple.com)}

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屋！