Блог

Итак, у меня есть две переменные, которые я получаю от серверной части следующим образом:

   return (
                    <View key={i} style={styles.subCont}>
                        <Text style={[
                            styles.devicesInfoText,
                            styles.deviceNameText,
                        ]}>
                            {`${x.name}* ${x.quantity}`}
                        </Text>
                        <Text style={styles.devicesInfoText}>{x.price} {constants.strings.sar}</Text>
                    </View>
                    )
  

Нет никакой гарантии, что имя будет арабским или английским, но мое приложение rtl, поэтому я хочу, чтобы количество всегда было слева, независимо от названия.

Это стили, которые я использую:

 devicesInfoText: {
    fontFamily: constants.fontFamily.bold,
    fontSize: RFValue(14),
    color: constants.colors.black,
},
deviceNameText: {
    flexShrink: 1,
    alignSelf: "center",
    writingDirection: "rtl"
},

subCont: {
    flexDirection: 'row-reverse',
    justifyContent: 'space-between',
},
  

Чтобы иметь фиксированные текстовые места, вы могли бы просто разместить два текстовых компонента в одной строке, например, вы могли бы заменить:

                         <Text style={[
                            styles.devicesInfoText,
                            styles.deviceNameText,
                        ]}>
                            {`${x.name}* ${x.quantity}`}
                        </Text>
  

С помощью этого:

                         <Text style={[
                            styles.devicesInfoText,
                            styles.deviceNameText,
                        ]}>
                            {`${x.name}* `}
                        </Text>
                        <Text style={[
                            styles.devicesInfoText,
                            styles.deviceNameText,
                        ]}>
                            {`${x.quantity}`}
                        </Text>