React Native 多行TextInput，文本居中答案

【问题标题】：React Native multi line TextInput, text is centeredReact Native 多行TextInput，文本居中
【发布时间】：2018-12-01 18:27:06
【问题描述】：

因此，当使用 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 截图

安卓截图

【问题讨论】：

您是否尝试在 textinput 中的样式标签中指定高度..？或者给我你试过的代码....
添加代码到问题。
@chetangodiya 你对解决方案有什么想法吗？没有人解决它:(
我试过并添加答案可能是你应该尝试让我知道它是否正确......
现在在iOS 上看起来会自动设置在top 上，对于Android，您可以使用textAlignVertical: 'top' reactnative.dev/docs/textinput#multiline

标签： android ios reactjs react-native textinput

【解决方案1】：

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

【讨论】：

它仅适用于 Android。遗憾的是，它在 iOS 中不起作用。

【解决方案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

【讨论】：

【解决方案3】：

原来围绕文本输入的视图有alignItems: 'center' 它使文本输入中的文本居中。

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

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

【讨论】：

【解决方案4】：

设置multiline 属性解决了这个问题。

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

【讨论】：