文本垂直对齐在反应本机(使用本机基础)

您可以使用 flex属性 justifyContent来实现这一点。

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

您可以使用纯 android 样式的属性 textAlign竖直

在顶部对齐文本:

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>

若要对齐任何内容，包括水平和垂直的文本，只需在容器中使用以下内容即可

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

文本垂直中心对齐汇总表

案例1: 视图下只有一个文本 Ios: 对 alignItems/justifyContent 使用 flex 使其更加居中, 高度 = 线高度，包括字体填充: 错误更居中

案例2: 在一个行视图中有两个文本，这两个文本字体是不同的，字体大小较小的文本不需要使用高度。

较大的那个是用上述方法对齐的。较小的那个只能与 font-size 一起使用，但不能与 line-height 和 height 属性一起使用。在这种情况下，两个文本都可以居中。

案例3: 一个行视图中有两个文本，这两个文本字体是不同的，字体大小较小的文本必须使用高度。

使用上述方法对字体大小较大的字体进行对齐，较小的字体大小使用带填充的高度和包含 FontPadding 来实现对齐。

还有演示

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

这里有一个有点丑陋的解决方案。ScrollView 将占用剩余的垂直空间，将文本推到底部。

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

或者。

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

RN version > = 0.55.2现在支持“ textAlign竖直”。

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


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

处理两种情况下的 flex: 1并设置 <Text>组件的 height。

我也遇到过类似的问题，在这里看了很多其他的帖子。

我创建了一个初始视图，并在该视图中嵌套了垂直居中的元素。我犯了一个错误，在初始视图中包含了“ flex: 1”，这搞砸了垂直对齐。

密码:

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

flex: 1使子视图占用父视图中的所有剩余空间。所以记住要确保父母占据了他们应该占据的空间。

我主张将内容包装在 <SafeAreaView>标签中，这样就可以根据内容所在的设备调整内容。但是您可以使用任何其他视图类型。

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

• flex: 1使视图占据了视图的整个宽度和高度
• justifyContent: 'center'使孩子们垂直居中
• alignItems: 'center'使孩子们水平居中

还可以对 Text 元素使用 textAlign: center并删除 alignItems: 'center'。当然，这只会在 Text 对象中居中显示文本，如果需要居中显示多个元素，则不会显示文本。

您可以使用 flexbox和 justifyContent: 'flex-end'来实现垂直定心。

这是零食: https://snack.expo.io/@rynek/vertical-centering-with-flexbox-in-react-native

在 Text 组件的容器上和在 Text 组件内部使用 flex: 1属性。因为如果你不定义高度和宽度，它就不起作用。

  <View style=\{\{
flex:1,
}} >
<Text style=\{\{
flex:1,
color: COLORS.primary,
fontFamily: "FredokaOne-Regular",
fontSize:40,
textAlign:"center",
textAlignVertical:"center",
}}
numberOfLines={2} >
Travia War
</Text>
</View>

只需使用 alignItems进行垂直对齐

alignItems: 'flex-start' //for start the View : vertical-align: top
alignItems: 'flex-end' // for vertical-align: bottom
alignItems: 'center' // for vertical-align: middle


<View style=\{\{ flexDirection: 'row', alignItems: 'flex-start'}}>
<View>  <Text>hello 1</Text> </View>
<View>  <Text>hello 2</Text> </View>
</View>

通过改变 alignItems检查这个示例