文本不会在React Native中垂直居中？
在React Native中，文本默认是在其容器的顶部对齐的，因此需要采取一些措施来实现垂直居中。
一种常见的方法是使用Flexbox布局。可以将容器的样式设置为justifyContent: 'center'，这将使文本在垂直方向上居中对齐。例如：
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text>居中文本</Text>
</View>另一种方法是使用绝对定位。可以将文本的样式设置为position: 'absolute'，并使用top和bottom属性将其位置设置为容器的中间。例如：
<View style={{ position: 'relative', height: '100%' }}>
<Text style={{ position: 'absolute', top: '50%', transform: [{ translateY: -50 }] }}>
居中文本
</Text>
</View>这些方法可以在React Native中实现文本的垂直居中。在实际开发中，可以根据具体需求选择适合的方法。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我正试图在TouchableOpacity中垂直地居中文本，但很难为我完成它。
我的App.tsx：
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, View } from "react-native";
import { CustomButton } from "./src/components/CustomButton";
export default function App() {
浏览 4提问于2021-07-02得票数 0
回答已采纳
在react-native中，当你创建一个TextInput多行时，输入中的文本在IOS中是顶部对齐的，在Android中是居中对齐的。
根据的说法，我们可以在安卓系统上使用'textAlignVertical‘来对齐顶部的文本，但它在IOS上不起作用
我的问题是:如何在IOS多行TextInput中垂直居中对齐
浏览 7提问于2021-02-08得票数 1
我有下面的React组件，它有一个水平对齐的图像列表，我想居中。
import React, { Component } from 'react';
import List from './src/List';
var items = require('./assets/shopping.json');
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class AwesomeProject e
浏览 1提问于2017-10-03得票数 0
在我的React Native应用程序中，我希望用不同国家的货币符号显示金额，并在其容器中垂直居中显示。
这适用于大多数货币符号，但也有一些改变了整个文本的垂直对齐方式。到目前为止，唯一能做到这一点的是亚美尼亚德拉姆和柬埔寨里尔的标志。
我目前还不能测试在安卓上发生了什么，所以我只能说这发生在iOS上。
这是我可以在React Native级别或iOS级别解决的问题吗？
浏览 0提问于2017-09-15得票数 0
我在React Native中有一个圆形按钮(用borderRadius制作)。组件中的文本应该垂直和水平居中。
通常情况下，这是好的，但垂直对齐似乎失败，无论我做什么。即使它在带有小fontSize的大环状突起上看起来很好，但小圆圈证明它是错误的！
<View style = {{
alignItems:'center',
justifyContent:'center',
backgroundColor:'yellow',
border
浏览 1提问于2018-04-29得票数 5
5回答
结合使用React Native和Expo。在iOS中，自定义导入字体居中有困难。Android渲染没有问题，文本垂直居中完美。使用iOS时，它略高于中心。
(原生字体在两个模拟器上都能很好地集中--安卓和iOS)。
有什么办法可以解决这个问题吗？
代码如下：
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Font } from 'expo';
export default cla
浏览 1提问于2018-08-09得票数 10
1回答
在React中，我的Text元素包含在一个View中
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
浏览 4提问于2018-01-09得票数 1
在React本机中，使用flexbox，我的<Text>组件中的文本是水平(垂直)居中的。
这就像预期的一样--如果文本行足够短，那么而不是需要将包装到下一行。
但是，当给出一个长文本字符串时，将封装在多行之间，呈现的文本不会使水平地以为中心！
相反，包装的文本将对齐到左侧边缘。
如何迫使包装的文本行水平居中？
这个水平中心是shortText，而不是longText：
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
class De
浏览 0提问于2018-04-20得票数 4
回答已采纳
我使用的是React原生版本0.43.0，它不支持ListEmptyComponent of FlatList。因此，当列表为空时，我使用ListHeaderComponent来呈现视图，
import React, { Component } from 'react';
import { Text, View, StyleSheet,FlatList } from 'react-native';
class App extends Component {
constructor(props) {
super(props);
this.st
浏览 8提问于2017-12-04得票数 33
18回答
如何在ReactNative中将文本在水平和垂直方向居中？
在justifyContent="center"和alignItems="center"不起作用的rnplay.org中，我有一个示例应用程序：
文本应该居中。为什么在文本(黄色)和父容器之间有一个顶部的空白处？
代码：
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} = React;
var
浏览 374提问于2016-06-01得票数 290
回答已采纳
2回答
我在react项目中使用了一个Badge元素reactstrap。
<Badge color="info">{item.price + "$"}</Badge>
徽章中的文本不会垂直居中对齐，只能在移动设备上居中对齐。它在pc chrome上工作得很好，当在检查中将视图更改为移动时，但只有在实际的移动设备上，文本不会居中。
我尝试了垂直对齐，中间对齐，项目居中对齐等，但都是徒劳的。
浏览 1提问于2021-03-25得票数 0
我正在使用Facebook的登录按钮(通过react-native-fbsdk)在我的反应-本机应用程序。
按钮文本Continue with Facebook在iOS中垂直显示居中，但在Android (7.0)中是偏离中心的。
我唯一的选择是手动调用LoginManager的自定义按钮，还是使用样式对齐文本的方法(我尝试了alignItems和justifyContent)？似乎我必须基于来做前者。
这是我现在的代码：
<LoginButton
scope={'public_profile email'}
style={{
width: 22
浏览 0提问于2018-06-04得票数 6
回答已采纳
使用以下包和版本: react-navigation: 4，react: 16.9.0，react-native：https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz， 我在标题中垂直居中内容，以及在标题中添加额外的垂直填充时遇到了问题。我的页眉看起来像这样： ? 您可以看到，使用模拟器(iPhone X)，标题上方似乎有额外的填充。类似地，在iPhone 8模拟器中： ? 我的导航代码目前如下所示： const somePageStackNavigator = createStackNavigator(
浏览 17提问于2020-01-25得票数 1
请看我的React代码示例：
import React from 'react';
import { Row, Col, Icon } from 'antd';
const MyRow = () => (
<Row type="flex" align="middle">
<Col md={10}>Trouble is a friend</Col>
<Col md={10}><Icon type="play-circle-o" />
浏览 11提问于2018-02-16得票数 6
回答已采纳
1回答
我想让我的文本在具有明确高度的视图中垂直居中。 Center text vertically in react-native没有完全回答我的问题，因为他们没有使用显式的高度。 当我使用 <View style={styles.rightContainer}>
<Text style={styles.label2}>
Centered
</Text>
</View> rightContainer: {
marginRight: 10,
浏览 15提问于2019-08-25得票数 2
由于某种奇怪的原因，我无法在React Native中让文本在一个按钮中垂直居中： <View style={styles.container}>
<TouchableOpacity
style={[styles.button, styles.shareButton]}
>
<View style={styles.shareButtonInner}>
<Text style={[styles.buttonText]}>
Button which wraps
</Text&g
浏览 10提问于2020-04-09得票数 1
回答已采纳
3回答
我在我的react原生应用程序中使用了一个多行TextInput，并在此问题上坚持了一段时间。我无法使IOS设备上的文本垂直对齐。 使用textAlign='center‘将文本垂直居中放置在IOS上...但它变成了一个展开的、永不结束的行。 添加multiline={true}会取消IOS中垂直对齐的文本，并将其放在输入的顶部。 <TextInput
style={{
width: wp('80%'),
height: hp('25%'),
borderWidth: 1,
浏览 35提问于2019-01-24得票数 11
2回答
我使用的是库："react-native-svg"："12.1.0“& "react-native-svg-transformer"："0.14.3” import FooIcon from '../assets/images/icons/fooIcon.svg';
<View style={{ flex: 1, paddingTop: 8 }}>
<FooIcon></FooIcon>
<View style={{ position: 'absolute&
浏览 51提问于2021-01-08得票数 0
回答已采纳
有两个州：
国家- 01：
国家- 02：
在状态-01中，“选择日期”是垂直居中的。就像这样，我试图居中“选择一个日期”文本和选择的日期垂直。不知道我错过了什么。请帮帮我。
我的stackBlitz链接是
浏览 2提问于2020-01-06得票数 0
回答已采纳
我有一个组件来表示选项卡标题，如下所示：
import Svg, { G, Path } from 'react-native-svg';
const Tab = ({ height = "57.8", width="104", children, fill='#D1D3D4' }) => (
<Svg height={height} width={width} viewBox="0 0 104 57.8">
<G>
<Path d="M-0.1
浏览 0提问于2018-02-08得票数 1
回答已采纳
我有以下代码，其中我希望黑色方框文本垂直放置，居中或对齐到顶部，并在相应的文本视图(示例文本)的末尾剪切。似乎即使文本经过转换，它仍然测量其原始高度，因此仅显示带有...的第一个字母。将width:50添加到转换后的视图将显示更好的结果，但示例文本中的行数正在变化(以及字体大小)。这是我得到的结果：
这是必需的结果(使用paint.net；)：
有谁知道怎么做吗？谢谢!
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React,
浏览 3提问于2017-11-29得票数 0
我试图将文本居中放置在标题中，但似乎无法实现它。我正在遵循一个关于这方面的教程，即使我一步一步地遵循它，但文本并没有居中对齐。我希望它居中，因为我将使用backHeaderTitle并使用useLayoutEffect返回到前一个屏幕。我非常感谢任何帮助，因为我已经被困在这几天了。 \ import "react-native-gesture-handler";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {
浏览 7提问于2021-04-09得票数 0
回答已采纳
1回答
我目前正在尝试将Menu.Item中的图标和文本与语义UI React V.0.68.2对齐。
目前，我的HTML输出如下所示：
<a class="active item pointer">
<i aria-hidden="true" class="icon ti-icon ti-home large"></i>
Dashboard
</a>
我的JSX是这样的：
<Menu vertical className="some classes" icon=
浏览 0提问于2017-06-05得票数 6
1回答
使用React-Native时，我需要将Image和组件LYDSceneQuestion居中
const SplashScreen = () => {
return (
<View style={styles.container}>
<LYDSceneQuestion text="Welcome to" />
<Image source={theme.images.logo} style={styles.logo} />
<NextB
浏览 6提问于2017-07-19得票数 0
我正在使用React Native的Image标签来显示具有可变宽度和高度的图像。我已经将图像设置为100x50，并设置了resizeMode = contain，这几乎可以完美地工作，但是如果调整图像的大小，它会完全垂直和水平居中。这种行为可以改变吗？样机屏幕截图：
红色方框表示图像元素设置为100x50。膝上型pic表示可变宽度/高度图片。您将注意到，该行为将所有内容垂直或水平居中。
在第二个例子中，我希望占据100%高度和大约一半宽度的图片被推到左对齐。这个是可能的吗？
谢谢!
浏览 5提问于2016-03-16得票数 16
回答已采纳
在我的中，我有一个高度300的红色盒子，我想要垂直地居中，还有一个图片，我想坐在这个红色盒子的顶部和里面。到目前为止，我的代码如下：
import React, { Component } from 'react';
import { View, Image} from 'react-native';
export default class Login extends Component {
render() {
return (
<View style={{
flex: 1,
justi
浏览 7提问于2020-03-31得票数 0
当React原生Text组件的高度高于文本(文本内部)时，文本将位于顶部(垂直对齐顶部)，并且不能设置垂直居中对齐。
就像这张图一样。(检查Text组件)
<View style={{ display: 'flex', justifyContent: 'center', alignItem: 'center', height: 96 }}>
<Text style={{ fontSize: 32 }}>Select</Text>
</View>
display: 'flex&#
浏览 30提问于2020-02-27得票数 0
1回答
我是新来的反应本地人。在android和iOS上，文本输入中的文本看起来不同。如何在文本输入中垂直对齐文本？
我的密码：
import React from "react"
import { TextInput } from "react-native"
export default function Signup() {
return (
<TextInput
style={{ backgroundColor: 'red', height: 30, textAlignVertica
浏览 0提问于2021-11-25得票数 4
回答已采纳
我有以下几点：
class MyTextArea extends React.Component {
handleClick = () => {
this.focus();
}
focus = () => this.ref.focus;
handleRef = (component) => {
this.ref = component;
};
render() {
return (
<div className="magicHelper" onClick={this.handle
浏览 3提问于2018-02-02得票数 76
回答已采纳
1回答
在react native中，我们有textAlign属性，可以选择"justify“(最后一行将遵循默认的文本方向)或" center”(文本居中，但行没有对齐)。我想知道是否有一种方法可以将这两行合并在一起(即，将文本居中，并使行均匀地开始和结束)？
编辑:这是从“React”导入react的代码；从“react-native”导入{ StyleSheet，Text，View，ScrollView，StatusBar }；
export default function App() {
return (
<View style={styles.backgroun
浏览 1提问于2021-02-04得票数 0
2回答
垂直居中竖排文本
、、
我有一些垂直的文本，我不能在他们的div中垂直居中。下面是一个例子：
请参见3个div (2个橙色和1个红色)。divs中的文本没有垂直居中，导致文本泄漏到div之外。
我已经用vertical-align: middle试过了，但是什么也做不了。
如何在div中垂直居中竖排文本？
浏览 5提问于2013-10-08得票数 3
3回答
居中和底部布局
、、
我正在开发我的第一个原生react应用程序，并试图将我的大脑包裹在布局上。到目前为止，我的代码如下：
import React from 'react'
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>My App</Text>
浏览 0提问于2018-10-26得票数 0
最近，我将我的原生react应用程序从0.59升级到0.62，升级后我发现sectionList搜索栏中的文本稍微增加了一点，在一些设备上也被删掉了。我如何让它垂直居中对齐？
浏览 14提问于2020-07-13得票数 0
回答已采纳
4回答
背景
我在屏幕上放置了一个图像，用来显示屏幕加载其他内容时的情况。
我想要对图像的中心，所以它总是集中在所有的设备。
问题
目前，图像显示在顶部中心。我也希望它垂直对齐。同时也要确保在所有的设备上它看起来都是一样的。
问题
什么是解决方案，以确保图像始终居中和适当的大小为所有设备？
例如，
我现在的密码，
在Photoshop中
图像300分辨率高776 px宽600 px
我希望图像是居中的水平和垂直在所有设备和外观良好，没有像素。我知道我需要设置图像大小。但根据我对Reacti原住民的理解，我可以在图像上使用它，然后使用JSX来处理它的响应性。
import React from '
浏览 3提问于2017-08-15得票数 28
回答已采纳
我正在使用Shawn Lin的Numberpicker库。它在Github上的链接是： https://github.com/ShawnLin013/NumberPicker 此小部件中的数字显示为： ? 如你所见，数字不是垂直居中的。 我一直在尝试将数字垂直居中对齐，但没有实现。该库允许文本向左、向右或居中对齐(center_horizontal)，但没有垂直居中文本的选项。我试着将“重力”设置为“中心”，但它不起作用。我试着设置填充，但也不起作用。 有没有办法使这个小部件中的文本垂直居中？
浏览 42提问于2020-10-16得票数 0
我刚接触React-native，我有一个非常简单(至少我这么认为)的问题。
我有一个带有resizeMode='contain'的ImageBackground，现在我想把背景定位到容器的顶部……
<ImageBackground style={styles.imageBackground} source={backgroundImage} resizeMode='contain'>
... some content
</ImageBackground>
图像以正确的方式呈现，但问题是它是垂直居中的，而不是我想让它顶部对齐……
浏览 2提问于2018-12-11得票数 3
1回答
我正在尝试使用React Navigation创建一个基本的选项卡应用程序，因此我有三个纯文本页面。它们在标签上垂直居中，而不是水平居中。这是将alignContent和justifyContent结合使用(这在过去对我很有效)。
一开始，我怀疑flex只是垂直弯曲，所以我使用了对比色。然而，它似乎跨越了标签。我也尝试过textAlign，但两种情况似乎都不起作用。
这是其中一个屏幕的示例：
export class ExampleScreen extends Component {
render() {
return(
<View sty
浏览 17提问于2019-08-03得票数 1
回答已采纳
在react native应用程序中，我使用'react-native-vector-icons/MaterialIcons'。
我试着用一些文本来点击<按钮。不幸的是，<图标没有与文本居中对齐。文本与<在同一行，但底部对齐，而不是中间对齐。
我没有flex: 1。代码已更新。
我的代码
<TouchableOpacity style={styles.navBarLeftButton}>
<Icon name="chevron-left" />
<Text style={styl
浏览 5提问于2016-04-04得票数 21
1回答
? 嗨, 对于原生的react来说真的很新。我正在尝试对齐我的文本，使‘in’标志的顶部与'45‘的顶部对齐。W3学校展示了一种图像对齐技术‘垂直对齐:文本-顶部：’，我想知道在react native中是否有等同的文本对齐技术。
浏览 27提问于2020-11-05得票数 0
我试图在底部边框放置两个图像，每边都有50%的宽度，以便适当地缩放到任何设备大小。但我似乎找不到任何绝对的定位来以一种可重复的方式运行。
我做了一个示例点心：
App组件和关联样式如下所示：
import React, { Component } from 'react';
import { View, StyleSheet, Image } from 'react-native';
export default class App extends Component {
render() {
return (
<View st
浏览 0提问于2018-02-04得票数 2
你能让我知道在下面的代码中有什么错误吗？它既不会将文本居中对齐，也不会居中(垂直)对齐。
<td> <h2 style = "align:center; vertical-align:middle;">TEXT</h2></td>
浏览 0提问于2012-08-19得票数 10
回答已采纳
我刚刚发现了react-native的NativeBase，我真的很喜欢它。我正在关注他们网站上的教程。我知道NativeBase使用Easy-Grid进行布局。我想垂直居中我的网页上的一个按钮。这是我正在构建的测试应用程序的一个简单界面：
<Container>
<Header>
<Button trnsparent>
<Icon name='ios-menu' />
</Button>
<Title&g
浏览 18提问于2016-12-17得票数 9
回答已采纳
我正在尝试将React Native中的View中的一些文本元素垂直居中： export const MainScreen = ({navigation}) => {
const {translations} = useContext(LocalizationContext);
return (
<View style={styles.container}>
<Text style={styles.itemTitle}>Ecco come fare per associare StrongAuth<
浏览 9提问于2020-01-22得票数 0
回答已采纳
7回答
我有以下HTML：
<div class="outer">
<div class="inner rotate">Centered?</div>
</div>
div.outer是一个窄的垂直条带。div.inner旋转90度。我想要文本“居中？”在其容器div中居中显示。我事先不知道这两个div的大小。
这很接近：。您可以从jsfiddle中看到，在应用transform: rotate(-90deg)样式之前，文本垂直居中，但在应用之后，文本在垂直方向居中。当div.outer很短时，这一点尤其明显。
是
浏览 0提问于2013-02-28得票数 84
回答已采纳
2回答
我开始使用react-native，我遇到了一个文本居中的问题，这是一个非常简单的代码，但我不知道为什么它不能工作
我也在玩动画，我做的所有例子中没有一个不起作用
所以我有一个带有文本和样式的视图，带有flex应该足够了，但还不够
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class HomeView extends Component {
render(){
浏览 18提问于2019-07-21得票数 1
回答已采纳
2回答
假设我有一行全部大写的文本(例如text-transform: uppercase)。我想让这个文本在div中垂直居中。我不需要担心多行文本。
有几种方法可以在CSS中垂直居中(例如，check out)。不幸的是，所有这些方法都考虑到了，并且我的文本没有任何下行体，所以它不能完美地居中。基本上，我希望将文本的一部分从基线居中到大写高度。
有没有办法使一行大写文本垂直居中？现在我正在使用position: relative并手动调整它，直到它居中(例如使用top: 2px)，但这显然不是一个健壮的解决方案(它非常依赖于浏览器呈现文本的方式，可用的字体等)。谢谢!
浏览 4提问于2013-04-29得票数 6
回答已采纳
1回答
免责声明:这是一个关于学校项目的问题。 我正在做一个使用React Native作为前端的全栈项目。我在页面布局方面遇到了一些问题。下面是我的代码： App.js： import React, {useState} from 'react';
import { StyleSheet, Text, View, Switch } from 'react-native';
import Header from "./components/Header";
export default function App() {
const [isEna
浏览 7提问于2020-04-03得票数 0
3回答
我得到了一些类似于jsfiddle的html：
使用一些jquery，程序为每个div分配新的高度，因此外部div比内部div大。它还重新定位div，使其在父级中垂直居中(使用top)。
问题是，即使div与垂直居中对齐，它们包含的文本也不是垂直居中。
有没有办法将所有包含的文本移到div的垂直中心？
谢谢麦克斯
浏览 0提问于2012-01-15得票数 1
回答已采纳
尝试垂直居中按钮内的文本。我已将重心设置为垂直居中：
android:gravity="center_horizontal|center_vertical
这对标准字体很有效。然而，对于独特的字体，特别是"@font/bangers"，按钮中的文本不是垂直居中的-它在垂直方向上偏离了很明显的一点。
是否有其他属性(行距和行高似乎不起作用)需要更新以设置可能具有不同字体设置的字体？
浏览 54提问于2019-10-21得票数 0
1回答
如何居中对齐“您的卡号无效”的错误，并在卡片上进行文本样式设计。我在他们的里找不到任何道具。
我的代码：
import React,{useState} from "react";
import { View } from "react-native"
import { CardForm } from "@stripe/stripe-react-native"
function App() {
const [cardDetails, setCardDetails] = useState(null)
return (
<V
浏览 11提问于2022-03-22得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
