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>

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

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

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>