React Native IOS上多行垂直居中文本的问题

Question

我在我的React Native应用中使用了一个多行TextInput，困扰我已经有一段时间了。我无法在IOS设备上垂直对齐文本。

使用textAlign='center'可以将文本在IOS上垂直居中...但它会变成一个不断换行的长句子。

添加multiline={true}会使IOS上的文本失去垂直对齐，并置于输入框顶部。

<TextInput
    style={{ 
        width: wp('80%'), 
        height: hp('25%'), 
        borderWidth: 1, 
        borderRadius: 10,   
        fontSize: RF(3), 
    }}
    textAlign={'center'}
    multiline={true}
    onChangeText={entry => this.setState({entry})}
    value={this.state.entry}
/>

我希望该行为与Android类似，以垂直和水平居中的方式显示占位符文本，并在用户输入更多文本时开始创建多行（如果需要）但始终保持垂直和水平居中。

请参见Android版本在左侧，IOS版本在右侧的图像。

左侧是Android，右边是IOS

- Jacob MacInnis

Answer 1

textAlignVertical只适用于Android平台 docs

如果上述图像是期望的行为，要使其垂直居中并使用multiline=true来实现这一点，我是这样做的：

1. 将文本输入包裹在一个视图中，并在该视图中设置最小和最大高度
2. 在同一个视图中设置flex和justify-center
3. 移除文本输入框内的填充
4. 将文本输入框的multiline属性设为true

<View className="flex-1 min-h-[44px] max-h-[130px] px-6 justify-center">
  <TextInput
    multiline={true}
    className="px-0 py-0"
  />
</View>

- Hernani Fernandes

Answer 2

在您的XML文件中，为您的TextInput添加属性paddingTop。

- Alan Schwarz

Answer 3

尝试在textInput的属性中添加textAlignVertical={"center"}。

- Aayush Anand

---

textAlignVertical 只在 Android 上有效。问题是如何在 iOS 上实现相同的效果。 - Petr Bela

Answer 4

你尝试过将 TextInput 放在一个 View 中吗？

<View style={{ alignItems: 'center', justifyContent: 'center' }}>
    <TextInput
        style={{ 
            width: wp('80%'), 
            height: hp('25%'), 
            borderWidth: 1, 
            borderRadius: 10,   
            fontSize: RF(3), 
        }}
        textAlign={'center'}
        multiline={true}
        onChangeText={entry => this.setState({entry})}
        value={this.state.entry}
    />
</View>

- instanceof