我是否誤解了 React Native 的 TextInput 多行和 numberOfLines 屬性？

Question

我正在嘗試創建一個 TextInput，它的高度為 4 行文本，如果有 5 行或更多行文本，它不會超過該高度，而是可以滾動。 我假設像這樣使用 TextInput 的 multiline 和 numberOfLines 屬性會起作用，但是當我到達第 5 行時，文本框變得更大了。

<TextInput
    placeholder="Take note of anything contributing to your mood"
    maxLength={250}
    multiline={true}
    numberOfLines={4}
/>

Answer 1

您可以將 lineHeight 和 maxHeight 屬性賦予 TextInput 樣式，即 maxHeight 應與 lineHeight 成比例，

如果 lineHeight 為 20，如果您想將文本框限制為 4 行，則 maxHeight 應為 100

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("Useless");

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
        multiline={true}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    maxHeight: 100,
    margin: 12,
    borderWidth: 1,
    lineHeight: 20,
  },
});