"textAlignVertical"不是一个有效的样式属性。

Question

当我尝试在Text元素上使用'textAlignVertical'样式时，出现了“textAlignVertical”不是有效的样式属性的错误。我已经查看了文档，它说我应该能够使用这个样式属性：https://facebook.github.io/react-native/docs/text.html

其他人有遇到这个问题吗？

- Eric

---

尝试将 alignItems: 'center' 应用于您想要垂直居中的子元素的父元素。 - Ivan Chernykh

感谢您的帮助，@Cherniv。 - Eric

Answer 1

textAlignVertical样式是仅适用于Android的属性。如果您正在开发iOS应用，请尝试使用flexbox对齐属性alignItems: center代替。

似乎textAlignVertical属性已从TextInput属性移动到Text元素样式中，这是在三天前提交的更改，并将在React Native 0.19中发布。

我不确定React Native文档是如何生成的，但根据我对提交差异的理解，文档似乎超前于最新发布版本。

- jevakallio

---

不确定我是否理解了解决方案，“alignItems: center”（加上“flex：1”）似乎不起作用（在iOS上进行测试）。可能已经过时了？ - User

我正在使用版本 0.50.3，但是 textAlignVertical 不起作用。 - technerd

Answer 2

有时您可能会发现 alignItems 不起作用--我发现我使用的图标完全消失了。相反，我只是在文本本身的样式中添加了一个 alignSelf: 'center' （而不是像需要使用 alignItems 一样在父级上）它似乎解决了问题。

- howard

Answer 3

为了让 textAlignVertical 正常工作，iOS系统中应该添加 lineHeight 属性而不是 height 属性

height: phoneWidth * 0.09, // for android
lineHeight: phoneWidth * 0.09, // for ios

- Sandeep Amarnath

Answer 4

textAlignVertical只适用于安卓，对于iOS，请使用multiline

<TextInput 
    height={32}
    textAlignVertical='top' // for android
    multiline // for ios
 />

- nazimudheen ti

Answer 5

行高解决方案对我很有用。我写这篇文章是为了明确展示如何按平台设置行高：

yourComponent: {
    width: 44, height: 44,
    ...Platform.select({
        ios: {
            lineHeight: 44
        },
        android: {}
    }),
    textAlign: 'center', textAlignVertical: 'center',
}

你的高度和行高相同，并且通过平台实现是很重要的。

需要注意的是，我还将此组件嵌套在 alignItems 设置为 center 的视图中。

我只是想明确地编写这段代码，因为我不得不从几篇文章中拼凑起来，如果有人正在寻找快速复制/粘贴解决方案，这应该会更容易。

- Rohan Vasishth

Answer 6

textAlignVertical: 'top'（适用于Android）

alignSelf: 'flex-start'（适用于iOS）

因此，如果您正在为Android和iOS构建应用程序，请同时提供这两个属性。

例如：

style={{textAlignVertical: 'top', alignSelf: 'flex-start'}}

- mohsinwajid