Текст вертикального выравнивания в реакции native (с использованием родной базы)

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

Если кто-нибудь знает, как решить эту проблему, пожалуйста, дайте мне знать.

Спасибо,

Ответ 1

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

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

Ответ 2

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

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

style={{textAlignVertical: 'top'}}

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

style={{textAlignVertical: 'center'}}

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

style={{textAlignVertical: 'bottom'}}

Ответ 3

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

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

}

Ответ 4

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

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

Ответ 5

Текст вертикального выравнивания по центру

Случай 1: В представлении есть только один текст 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>

Ответ 6

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

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

Или..

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