React Native多行TextInput，文本居中

Question

因此，在使用multiline = true的文本输入时，出现文本垂直居中而不是被推到顶部的问题。

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

我想指出的是，我尝试添加textAlignVertical: 'top'textinput的样式

代码：（我将其作为单独的命令使用，因为我在带有表单文本的表单中使用它，但是所有参数都以某种方式传递）

    <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屏幕截图

android屏幕截图

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

和博览会链接可能会帮助你点击这里

Answer 3

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

所以改成alignItems: this.multiline ? 'flex-start' : 'center',

另外对于 android 问题，我必须添加numberOfLines={5}修复信箱的内容