在本机反应中在右侧对齐文本行

Question

如何在 react native 中完成这样的布局？我知道我可以在第一行使用justifyContent: space-between，但是如何让第二行填充所有可用空间，以便顶行的 488498 在右侧与最下面一行的字符串？

我能想到的唯一方法是使用等宽字体，但在这种情况下这不是替代方法，因为我不允许更改字体。

提前致谢。

Answer 1

您需要两个<View> 标签，一个具有alignSelf: 'flex-start' 样式属性（因此它具有可变宽度），一个具有justifyContent: 'space-between' 样式属性（因此文本会填满空白区域）。

下面是一个例子，这里有一个Expo Snack 供你摆弄。

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <View style={styles.container}>
          <Text style={styles.paragraph}>
            afzender:
          </Text>
          <Text style={styles.paragraphRight}>
            488498
          </Text>
        </View>
        <Text>Very long text omg! This will surely be long.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    alignSelf: 'flex-start',
    alignContent: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  container: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    backgroundColor: 'red',
  },
  paragraph: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'left',
  },
  paragraphRight: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'right',
  }
});

Answer 2

你可以用 div 包裹 488498 并使用 CSS 给它 text-align:right 或 float:right...