React Native 标题行中元素的对齐

Question

我在我的 React 本机应用程序中有一个标题部分，我希望在一行中显示两位信息、一个后退按钮图标和一些文本。我想弄清楚如何安排这些元素，以便后退按钮图标向左对齐，而客户端名称的文本在中心对齐。所以这意味着右边只有空白空间。

我不清楚如何做到这一点。到目前为止，请参阅下面的内容。我是否需要将文本元素包围在另一个视图中并以某种方式设置样式？

<View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between' }}>
  <Feather
    name='chevron-left'
    size={24}
    onPress={() => props.navigation.goBack()}
    color={styles.colors.textInverse}
    style={styles.layout.padding.horizontal}
  />
  <Text style={{ color: '#fff', fontSize: 18, alignSelf: 'center' }}>
    {props?.client?.firstName} {props?.client?.lastName}
  </Text>
</View>

Answer 1

您可以使用 alignSelf 属性将文本元素居中对齐，并使用 justifyContent 属性将后退按钮图标左对齐。

您还可以在文本元素上使用 flex: 1 以允许它占用右侧的剩余空间，因此它会在中心对齐但也会填满剩余空间。

所以更新后的代码看起来像：

    <View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between' }}>
      <Feather
        name='chevron-left'
        size={24}
        onPress={() => props.navigation.goBack()}
        color={styles.colors.textInverse}
        style={styles.layout.padding.horizontal}
      />
      <Text style={{ color: '#fff', fontSize: 18, alignSelf: 'center', flex: 1 }}>
        {props?.client?.firstName} {props?.client?.lastName}
      </Text>
    </View>