React Native: 如何对齐内嵌文本？

Question

我希望能够实现这个效果，让两段文本位于同一水平线上，其中一段文本居中，另一段文本在右侧：

以下是我的代码，忽略颜色（这段代码根本不起作用）：

样式：

  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>

我遇到了麻烦，有人能帮助我吗？

- bigpotato

---

https://dev59.com/CJLea4cB1Zd3GeqP8_Ro - Michael Benjamin

Answer 1

看起来你的问题与alignSelf有关，你想使用alignItems。

你的代码应该是这样的。

你的视图：

<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,
  },

- Lian van der Vyver

Answer 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>

- FuzzyTree