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

Answer 1

我为你试过了，如果正确请告诉我

 <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可能对你有帮助click here

Answer 2

原来文本输入周围的视图 alignItems: 'center' 使文本在文本输入中居中。

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

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

Answer 3

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

Answer 4

设置 multiline 道具解决了问题。

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

React Native 多行 TextInput，文本居中

React Native multi line TextInput, text is centered

android

textinput

ios

reactjs

react-native