Clever Geek Handbook

Vertical align text in react native (using native base)

Hi I was wondering if there is a way that I can vertically align in React Native. I'm trying to position at the bottom, but I don't think I can find a good way to do it.

If anyone knows how to fix this problem please let me know.

Thank,

+18


source to share


6 answers


To achieve this, you can use the property flex

, justifyContent

. Full documentation is here .



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


source


You can only use Android style property textAlignVertical

To align text on top:

style={{textAlignVertical: 'top'}}

To center align text:



style={{textAlignVertical: 'center'}}

To align text to the bottom:

style={{textAlignVertical: 'bottom'}}
+15


source


to align any content, including text both horizontally and vertically, just use the following in the container it contains

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

}
+3


source


This problem occurs especially when you are using an image or icon. I had the same problem, my solution:

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


source


Vertical center alignment text

Case 1: There is only one text in the view Ios: use flex with alignItems / justifyContent to be more centered, Adr: height = lineHeight, includeFontPadding: false more centered

Case 2. In line view, there are two texts, and the two text fonts are different, and text with a smaller font size should not use the height.

The larger one is aligned using the above method. The smaller one can only be used with font-size, not with the line-height and height attributes. In this case, both texts can be centered.

Case 3: In Linear View, there are two texts, and the two text fonts are different, and the text with the smaller font size should use the height.

The one with the larger font size is aligned using the above method, while the smaller font size uses the indented height and includeFontPadding to achieve alignment.

And Demo

<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>
+1


source


Here's a somewhat ugly solution to the problem. The ScrollView will take up the remaining vertical space by sliding the text down.

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

Or..

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


source






More articles:


All Articles