React Native 多行垂直居中文本就 IOS 麻烦答案

【问题标题】：React Native multi-line vertically centered text on IOS troubleReact Native 多行垂直居中文本就 IOS 麻烦
【发布时间】：2019-06-17 13:35:43
【问题描述】：

我在我的 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 on left, IOS on right

【问题讨论】：

标签： ios react-native textinput

【解决方案1】：

尝试将 textAlignVertical={"center"} 添加到 textInput 的 props

【讨论】：

textAlignVertical 仅适用于 Android。问题是如何在 iOS 上做到这一点。

【解决方案2】：

您是否尝试将 TextInput 包装在视图中？

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

【讨论】：

【解决方案3】：

在XML 文件中将属性paddingTop 添加到TextInput。

【讨论】：