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

Answer 1

尝试将textAlignVertical = {“ center”}添加到textInput的道具

Answer 2

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

Answer 3

您是否尝试过将 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>

在iOS问题上反应本机多行垂直居中文本

3 个答案: