Question

因此，在使用multiline = true的文本输入时，我遇到了以下问题：文本垂直居中，而不是被推到顶部。

此问题在ios和android上均会发生，除了android另一个问题是，当输入多行时，它们会被打成1行高度的信箱。

我想指出的是，我已经尝试在文本输入的样式中添加textAlignVertical: 'top'

代码：（我将其作为单独的命令使用，因为我在带有表单文本的表单中使用它，但是所有参数都被传递了一些东西）

    <TextInput
            style={styles.input}
            value={value}
            autoComplete={autoComplete}
            autoCapitalize={autoCapitalize}
            placeholder={placeholder}
            secureTextEntry={secureTextEntry}
            keyboardType={keyboardType}
            returnKeyType={returnKeyType}
            autoFocus={autoFocus}
            onChangeText={onChangeText}
            onSubmitEditing={onSubmitEditing}
            multiline={multiline || false}
            ref={(r) => { inputRef && inputRef(r); }}
    />

样式：

input: {
    paddingRight: 10,
    lineHeight: 23,
    flex: 2,
    textAlignVertical: 'top'
},

ios screenshot

android screenshot

tia

Answer 1

如果有人遇到相同的问题，请尝试textAlignVertical: "top" 这可行。有关更多信息，请尝试https://github.com/facebook/react-native/issues/13897

Answer 2

我为您尝试过此操作，请告诉我它是否正确

 <TextInput
            style={styles.input}
            value={this.state.value}
            onChangeText={text=>this.setState({value:text})}
            multiline={true}
            underlineColorAndroid='transparent'
    />

样式为

  input: {
    width:200,
    borderBottomColor:'red',
    borderBottomWidth:1,
},

和展览链接可能会帮助您click here

Answer 3

因此事实证明，文本输入周围的视图具有alignItems: 'center' 在文本输入中居中显示文本。

因此将其更改为alignItems: this.multiline ? 'flex-start' : 'center',

对于android的问题，我还必须添加numberOfLines={5}来解决信箱问题

Answer 4

设置multiline道具可以解决问题。

   <TextInput
        style={styles.input}
        value={this.state.value}
        onChangeText={text=>this.setState({value:text})}
        multiline={true}
        numberOfLines={4}
   />

React Native多行TextInput，文本居中

4 个答案: