React-native: расположение представления рядом с центрированным

Question

Я хочу добиться следующего:

Я хочу отобразить метку рядом с центрированным значением. Насколько я понимаю, это невозможно с flexbox, верно? Как мне этого добиться?

Кроме того, я бы хотел, чтобы основание было выровнено, но в настоящее время эта опция не работает на Android. Поэтому я использую жестко закодированные отступы для текстовых полей меньшего размера. Любая другая идея для этого?

Answer 1

Еще одно предложение, если вы не хотите использовать пустые View s, это поместить Value в центр, а затем расположить unit в absolute (чтобы он не сгибался) идо bottom, так что вы убедитесь, что он выровнен по основанию с Value.

<View style={styles.container}>
  <Text style={styles.value}>
    Value
    <Text style={styles.unit}>unit</Text>
  </Text>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'lightgrey',
  },
  value: {
    backgroundColor: '#eee',
    textAlign: 'center',
    fontSize: 20,
    position: 'relative',
  },
  unit: {
    fontSize: 12,
    position: 'absolute',
    bottom: 0,
  },
});

Answer 2

Вы можете использовать 3 гибких бокса, расположенных горизонтально, чтобы получить аналогичный эффект. Оставьте левое поле пустым.

(для справки добавлены цвета фона)

<View style={styles.container}>
    <View
      style={{
        flexDirection: 'row',
      }}>
      <View style={{ flex: 1}} /> {/* blank view */}
      <View
        style={{
          flex: 1,
          justifyContent: 'flex-end',
          alignItems: 'center',
        }}>
        <Text style={{ fontSize: 30 }}>Value</Text>
      </View>
      <View
        style={{
          flex: 1,
          justifyContent: 'flex-end',
          alignItems: 'fllex-start',
        }}>
        <Text style={{ fontSize: 12 }}>Unit</Text>
      </View>
    </View>
  </View>