React Native：如何对齐内联文本？答案

【问题标题】：React Native: How to align inline text?React Native：如何对齐内联文本？
【发布时间】：2016-10-16 16:28:23
【问题描述】：

我想这样做，其中两个文本都在 1 条水平线上，其中一个在中心，另一个在右侧：

这是我拥有的，忽略颜色（根本不起作用）：

风格：

  rowLabelText: {
    color: "#0B1219",
    fontFamily: Fonts.Knockout31JuniorMiddleWeight,
    fontSize: 16.0,
  },

标记：

    <View style={{flexDirection: 'row', height: 30, flexWrap: 'wrap', backgroundColor: 'green'}}>
      <View style={{ flex: 1, backgroundColor: 'red', justifyContent: 'center', alignSelf: 'center'}}>
        <Text style={styles.rowLabelText}>
          adjkfdasjkfaskj
        </Text>
      </View>
      <View style={{ flex: 1, backgroundColor: 'blue', justifyContent: 'center', alignSelf: 'flex-end' }}>
        <Text style={styles.rowLabelText}>
          adjkfdasjkfaskj
        </Text>
      </View>
    </View>

我遇到了麻烦。有人可以帮助我吗？

【问题讨论】：

stackoverflow.com/q/34753717/3597276

标签： react-native flexbox

【解决方案1】：

看来您的问题在于您想使用 alignItems 的 alignSelf。

这就是你的代码的样子。

您的看法：

<View style={styles.textContainer}>

     <View style={styles.leftContainer}>
        <Text style={styles.rowLabelText}>
          adjkfdasjkfaskj
        </Text>
     </View>

     <View style={styles.rightContainer}>
        <Text style={styles.rowLabelText}>
          adjkfdasjkfaskj
        </Text>
     </View>

</View>

你的风格：

  textContainer:{
    flexDirection: 'row',
    height: 30,
    backgroundColor: 'green'
  },
  leftContainer:{
    flex: 1,
    justifyContent: 'center',
    alignItems:'center',
    backgroundColor: 'red',
  },
  rightContainer:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end',
    backgroundColor: 'blue',
  },
  rowLabelText: {
    color: "#0B1219",
    fontSize: 16.0,
  },

【讨论】：

【解决方案2】：

将文本相对于整个屏幕宽度居中，同时在居中文本的右侧保留一些文本的一种方法是在右侧文本上使用绝对定位。

在右侧文字上使用绝对定位，不会影响居中文字的位置。

<View style={{flexDirection: 'row'}}>
    <View style={{flex:1, alignItems: 'center', backgroundColor: 'red'}}>
        <Text>50%</Text>
    </View>
    <View style={{position:'absolute', right: 20, backgroundColor: 'blue'}}>
        <Text>+$0.80</Text>
    </View>
</View>

【讨论】：