React Native中如何实现文本列右对齐？属性设置无效怎么办

问题 #

在React Native中实现文本列右对齐效果时，设置textAlign: 'right'搭配alignSelf: 'flex-end'未生效。

失效原因 #

React Native的View组件默认flex布局规则为alignItems: 'stretch'，会强制子组件拉伸至与父容器同宽，直接给Text组件设置alignSelf: 'flex-end'会被该默认规则覆盖，无法呈现预期效果。

正确实现 #

用一层容器包裹整列文本，拆分容器对齐和文本对齐的职责，代码示例：

import { View, Text, StyleSheet } from 'react-native';

const RightAlignTextCol = () => {
  return (
    <View style={styles.pageWrap}>
      <View style={styles.textColContainer}>
        <Text style={styles.colItem}>第一行文本内容</Text>
        <Text style={styles.colItem}>第二行更长的文本测试内容</Text>
        <Text style={styles.colItem}>第三行短文本</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  pageWrap: {
    flex: 1,
    padding: 16,
  },
  textColContainer: {
    // 让整列文本容器靠父容器右侧排列，宽度自适应文本内容
    alignSelf: 'flex-end'
  },
  colItem: {
    // 让每行文本靠容器右侧对齐，保证所有文本右边缘齐平
    textAlign: 'right',
    fontSize: 16,
    marginVertical: 4,
  }
})

export default RightAlignTextCol;

避坑提示 #

• 若文本列放在flexDirection: 'row'的横向布局中，不要给文本容器或Text组件添加flex: 1属性，该属性会让组件占满剩余横向空间，抵消右对齐效果。
• 若需要固定宽度的文本块靠右，直接给textColContainer设置固定宽度即可，无需修改其他属性。

内容的提问来源于stack exchange，提问作者dirtiersmile