Вложенный текст, вертикальное выравнивание не работает - React Native

Question

Хорошо, давайте сделаем это просто.У меня есть два Text компонента, один внутри другого.Первый Text имеет fontSize 60, а вложенный fontSize 20.Поскольку размер шрифта варьируется, вложенное Text выравнивается по основанию.Я хочу, чтобы вложенный Text вертикально выровнялся по центру с родительским.

Код

// @flow
import React, { Component } from 'react';
import { Text } from 'react-native';

type PropTypes = {}
export default class SampleVC extends Component<PropTypes> {
    render() {
        return (
            <Text style={{ fontSize: 60 }}>
                Big Text
                <Text style={{ fontSize: 20 }}>Small Text</Text>
            </Text>
        );
    }
}

Токовый выход

Требуемый вывод

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

Answer 1

Вы также можете определить smallText lineHeight для соответствия bigText:

render() { return ( <Text style={{ fontSize: 60 }}> Big Text <Text style={{ fontSize: 20, lineHeight:60 }}> Small Text </Text> </Text> ); }

Answer 2

< View style={{flexDirection:'column'}}>


    <View style={{alignContent:'center'}}>

        <Text style={{fontSize:60}}>{props.bigText}</Text>

    </View>

    <View style={{alignContent:'center'}} >

        <Text style={{fontSize:20}}>{props.smallText}</Text>

     </View>

< /View>

Answer 3

Вы можете обернуть вложенный текст в представление, но вложенное представление должно иметь ширину и высоту.Если у вас нет проблем с этим ограничением, это хорошее решение.

<Text style={{ fontSize: 60 }}>
      Big Text
      <View style={{ height:40, width:100, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 20 }}>Small Text</Text>
      </View>
</Text>

Answer 4

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

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

<View style={{ flexDirection: 'row', alignItems: 'center' }} >
  <Text style={{ fontSize: 60 }}>Big Text</Text>
  <Text style={{ fontSize: 20 }}>Small Text</Text>
</View>

И если вы хотитечтобы использовать его часто, создайте свой собственный пользовательский компонент для вышеперечисленного, например,

function CustomNextedText (props) {
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }} >
      <Text style={{ fontSize: 60 }}>{props.bigText}</Text>
      <Text style={{ fontSize: 20 }}>{props.smallText}</Text>
    </View>
  );
}

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

 <CustomNextedText bigText='Big Text' smallText='Small Text'/>

Надеюсь, это поможет.

Answer 5

Вы можете добавить оба Текст в Вид .

<View style={{alignItems: 'center', justifyContent: 'center'}}>
       <Text style={{ fontSize: 60, height:'100%' }}>Big Text</Text>                
       <Text style={{ fontSize: 20, height:'100%' }}>Small Text</Text>
</View>