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

安卓截图

原文由 Red 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

所以事实证明，围绕文本输入的视图有 alignItems: 'center' 将文本输入中的文本居中。

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

同样对于 android 问题，我必须添加 numberOfLines={5} 修复了信箱

原文由 Red 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 Subhendu Kundu 发布，翻译遵循 CC BY-SA 4.0 许可协议