Вертикальное выравнивание текста в React Native (с использованием nativebase)

Для этого можно использовать свойство flex, justifyContent. Полная документация здесь.

<View style={{justifyContent: 'center'}}>
   <Text>Vertically Centered Text</Text>
</View>

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

    container :{
       justifyContent: 'center', //Centered horizontally
       alignItems: 'center', //Centered vertically
       flex:1
    }

Вы можете использовать свойство стиля только для Android textAlignVertical

Чтобы выровнять текст по верхнему краю:

style={{textAlignVertical: 'top'}}

Чтобы выровнять текст по центру:

style={{textAlignVertical: 'center'}}

Чтобы выровнять текст по низу:

style={{textAlignVertical: 'bottom'}}

Эта проблема возникает особенно при использовании изображения или значка. У меня была такая же проблема с моим решением:

 <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
   <Icon type="MaterialCommunityIcons" name="barcode" />
   <Text style={{ textAlign: 'center' }}>{urun_data.barkod}</Text>
</View>

Сводка выравнивания текста по вертикали по центру

Случай 1: в View Ios есть только один текст: используйте flex с alignItems / justifyContent, чтобы быть более центрированным, Adr: height = lineHeight, includeFontPadding: false более центрированным

Случай 2: есть два текста в линейном представлении, и два текстовых шрифта различны, и текст с меньшим размером шрифта не должен использовать высоту.

Выравнивание большего размера выполняется описанным выше способом. Меньший можно использовать только с font-size, но не с атрибутами line-height и height. В этом случае оба текста можно центрировать.

Случай 3: Есть два текста в линейном представлении, и два текстовых шрифта различны, и текст с меньшим размером шрифта должен использовать высоту.

Шрифт с большим размером шрифта выравнивается с использованием вышеуказанного метода, а меньший размер шрифта использует высоту с заполнением и includeFontPadding для достижения выравнивания.

И демо

<View
    style={{
        flexDirection: 'row',
        height: 38,
        borderWidth: 1,
        borderColor: '#000',
        alignItems: 'center'
    }}
>
    <Text
        style={{
            fontSize: 24
        }}
    >
        测试
    </Text>
    <Text
        style={{
            fontSize: 24,
            lineHeight: 36,
            height: 36,
            includeFontPadding: false
        }}
    >
        测试
    </Text>
</View>
<View
    style={{
        flexDirection: 'row',
        height: 38,
        borderWidth: 1,
        borderColor: '#000',
        alignItems: 'center'
    }}
>
    <Text
        style={{
            fontSize: 24
        }}
    >
        ios设备
    </Text>
    <Text
        style={{
            fontSize: 16
        }}
    >
        更对齐
    </Text>
</View>
<View
    style={{
        flexDirection: 'row',
        height: 38,
        borderWidth: 1,
        borderColor: '#000',
        alignItems: 'center'
    }}
>
    <Text
        style={{
            fontSize: 24,
            lineHeight: 36,
            height: 36,
            includeFontPadding: false
        }}
    >
        安卓
    </Text>
    <Text
        style={{
            fontSize: 12,
            height: 18,
            includeFontPadding: false,
            paddingVertical: 2,
            paddingHorizontal: 1,
            paddingTop: DeviceInfo.isIOS ? 3 : 2,
        }}
    >
        更对齐
    </Text>
</View>

У меня была аналогичная проблема, и я просмотрел многие другие сообщения здесь. Вот что у меня сработало.

Я создал начальное представление и вложил в него элементы, которые я хотел вертикально по центру. Я допустил ошибку, включив «flex: 1» в начальный вид, что испортило вертикальное выравнивание.

Код:

<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center'}}>
  <Text>Content here to be vertically aligned</Text>
  <Switch>...</Switch>
</View>

Версия RN> = 0.55.2 теперь поддерживает textAlignVertical.

<TextInput
    style={styles.text}
    onChangeText={text => console.log('text >>>>>>>', text)}
    value='sample text'
 />

text: {
  textAlign: 'center',
  textAlignVertical: 'center',
}

Работаем с обоими случаями flex: 1 и устанавливаем height компонента <Text>.

flex: 1 заставляет дочернее представление занимать все оставшееся пространство в родительском представлении. Поэтому не забудьте убедиться, что родитель занимает предполагаемое место.

Я бы посоветовал заключить ваш контент в тег <SafeAreaView>, чтобы он настраивал контент для устройства, на котором он находится. Но вы можете использовать любой другой тип представления.

 <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
     <Text>Centered Text</Text>
 </SafeAreaView>

• flex: 1 заставляет вид занимать всю ширину и высоту вида в
• justifyContent: 'center' вертикально центрирует детей
• alignItems: 'center' центрирует детей по горизонтали

Вы также можете использовать textAlign: center в элементе Text и удалить alignItems: 'center'. Это, конечно, только центрирует текст в объекте Text и не работает, если у вас есть несколько элементов, которые необходимо центрировать.

Вот несколько уродливое решение проблемы. ScrollView займет оставшееся вертикальное пространство, сдвигая текст вниз.

<View>
  <ScrollView>{}</ScrollView>
  <Text>Your text</Text>
</View>

Or..

<View>
  <View style={{ flex: 1 }}>{}</View>
  <Text>Your text</Text>
</View>

Вы можете использовать flexbox с justifyContent: 'flex-end' для достижения вертикального центрирования.

Вот закуска: https://snack.expo.io/@rynek/vertical-centering-with-flexbox-in-react-native