React Native多行TextInput，文本居中

Question

当使用multiline=true的文本输入时，我遇到了一个问题，即文本垂直居中而不是被推到顶部。

这个问题在iOS和Android上都会发生，除了Android还有另一个问题，就是当输入多行时，它们会被压缩到一行的高度。

我想指出，我尝试将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截图

- Red

---

你是在尝试在TextInput的style标签中设置高度吗？还是可以给我你尝试过的代码... - chetan godiya

已添加代码到问题中。 - Red

@chetangodiya，你有任何解决方案的想法吗？没有人解决它 :( - Red

我尝试着添加了答案，也许你应该试一下并告诉我是否正确。 - chetan godiya

看起来现在在 iOS 上它会自动设置为 top，而在 Android 上，您可以使用 textAlignVertical: 'top'。 - Velizar Andreev Kitanov

Answer 1

如果有人遇到相同的问题，可以尝试使用textAlignVertical: "top"。这个方法有效。 如需更多信息，请参见https://github.com/facebook/react-native/issues/13897。

- Subhendu Kundu

---

仅适用于Android系统，遗憾的是它在iOS上无法运行。 - Luvnish Monga

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

而 Expo Link 可能会对你有所帮助,点击此处

- chetan godiya

Answer 3

所以事实证明，围绕文本输入的视图具有alignItems: 'center'属性，这使得文本在文本输入框中居中显示。

因此，将其更改为alignItems: this.multiline ? 'flex-start' : 'center' 对于Android问题，我不得不添加numberOfLines={5}来解决黑边问题。

- Red

Answer 4

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

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

- Colin Wang

Answer 5

在我的情况下：

 textAlignVertical: multiline ? 'top' : 'center',

- Hung Nguyen

Answer 6

我刚刚明白了。设置样式 textAlignVertical: "top" 不起作用。但是将其作为多行文本输入的一个属性设置可以起作用。使用 textAlignVertical= "top"。

- Olu