在React Native中在右侧对齐文本行

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