Выравнивание строк текста на правой стороне в реагировать родной

Question

Как бы сделать подобный макет в реагировать нативно?Я понимаю, что могу использовать justifyContent: space-between для первой строки, но как бы заставить второй ряд заполнить все доступное пространство, чтобы 488498 верхней строки выровнялся по правой стороне строкив нижнем ряду?

Единственный способ, о котором я мог подумать, - это использовать моноширинный шрифт, но в данном случае это не альтернатива, так как мне не разрешено менять шрифт.

Заранее спасибо.

Answer 1

Вам понадобятся два тега <View>, один из которых будет иметь стиль alignSelf: 'flex-start' (поэтому он имеет переменную ширину), а другой - стиль justifyContent: 'space-between' (поэтому текст заполняет пустое пространство).

Ниже приведен пример, и вот Экспо Закуска для вас, чтобы возиться с.

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

Вы можете заключить 488498 в div и присвоить ему text-align:right ИЛИ float:right, используя CSS ...