numberOfLines TextInput属性不起作用

Question

我已经用 react-native 创建了一个应用程序，并有一个消息聊天选项。当我点击 TextInput 并输入两行文本时，上面的一行会被隐藏。为了解决这个问题，我在文档中看到了 numberOfLines 属性，但它没有起作用。

以下是我的代码：

<TextInput

                ref='textInput'
                multiline={true}
                numberOfLines: {5}
                onChangeText={this.onChangeText}
                style={[styles.textInput, {height: context.props.textInputHeight}]}
                placeholder={context.props.placeholder}
                placeholderTextColor="#5A5A5A"
                value={context.state.text}/>

我也在getDefaultProps函数中尝试了它：

getDefaultProps() {
    return {
      placeholder: 'Type a message...',
      navHeight: 70,
      textInputHeight: 44,
      numberOfLines:5,
      maxHeight: Screen.height,
    };
  },

但是并没有起作用。

- Ankush Rishi

Answer 1

总之：

<TextInput
  ...
  numberOfLines={Platform.OS === 'ios' ? null : numberOfLines}
  minHeight={(Platform.OS === 'ios' && numberOfLines) ? (20 * numberOfLines) : null}
/>

- Made in Moon

---

数字20具体表示什么？ - kojow7

@kojow7 这是每行的高度。 - Made in Moon

在每行硬编码20是绝对不正确的。在Android上，numberOfLines会自动计算每行所需的高度，因此textinput看起来完美无瑕。 - Bravo

Answer 2

您可以使用maxHeight和minHeight来接受您想要的内容。对于标准文本字体大小，将maxHeight={60}设置为TextInput会在3行后可滚动。这对于IOS很好-对于Android，您可以使用numberOfLines属性。

- David

---

是的，现在我们可以使用maxHeight属性，但当我两年前提出这个问题时，文档中还没有它。感谢更新！ - Ankush Rishi

Answer 3

您有numberOfLines: {5}，应该是numberOfLines={5}。或者这只是在SO上的笔误？

此外，建议对textAlignVertical：'top'进行样式设置。

- Samuli Hakoniemi

---

当我在样式style={[styles.textInput, {height: context.props.textInputHeight}]}中删除高度时，它可以工作。如果我添加textAlignVertical: 'top'，则无法显示我在文本框中输入的文本。 - Ankush Rishi

Answer 4

你应该设置maxHeight。我设置了maxHeight={70}。

- Kojo Clinton