如何独立地对每个子元素进行左对齐、右对齐或居中对齐？

Question

如何独立地对每个子元素进行左对齐、右对齐或居中对齐？

60

在 React Native 中我有：

<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不支持margin: 'auto'。此外，其他答案仅适用于左右对齐，但没有人真正解决了没有自动边距的居中对齐。

我正在尝试在react native中制作导航栏。vanilla ios版本如下：

_{(来源：apple.com)}

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

- Croolsby

4个回答

9

您可以将marginLeft：'auto'设置为中间组件。这应该会将其推向右侧。在React Native中也适用。

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

- to7be

2

如果您使用的是Navigator模块的NavigationBar，请参阅我的问题：如何更改Navigator.NavigationBar（标题）的默认样式。请注意保留HTML标签。

- Mark Silver

1

使用这个。

marginLeft: "auto",
marginRight: "auto"

- Amani Kanu

在哪里？它是做什么的？ - Hans Bouwmeester

就像问题已经提到的那样，在React Native中，margin auto不起作用。 - Guy Incognito

1

这在2021年的React Native中对我有效。 - JCraine

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- agenthunt · Accepted Answer

一种方法是使用嵌套的视图（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',
  }
});