React-Native：无论 numberOfLines 道具如何，TextInput 大小都会自动增加

Question

我有一个TextInput如下图，

 <TextInput
     style={{borderWidth: 1, borderColor: "#dedede", width: '90%',  marginTop: 20, borderRadius: 1}}
     placeholder={'Tell us more about our service'}
     multiline = {true}
     numberOfLines = {10}
     value={this.state.customerFeedback}
     onChangeText={customerFeedback => this.setState({ customerFeedback })}
     underlineColorAndroid="transparent"
 />

因为我给出了 numberOfLines = {10}，如果我键入超过 10 行，文本必须在 TextInput 区域内滚动。但在我的例子中，TextInput 的大小逐渐增加，如下图所示，

如果我们看 TextInput 有 10 多行。

谁能告诉我如何根据numberOfLines道具限制TextInput区域？谢谢。

Answer 1

您唯一缺少的是 textInput 中样式的 maxHeight 属性，我添加了 maxHeight:50:

<TextInput
     style={{borderWidth: 1, borderColor: "#dedede", width: '90%',  marginTop: 20, borderRadius: 1,maxHeight:50}}
     placeholder={'Tell us more about our service'}
     multiline = {true}
     numberOfLines = {10}
     value={this.state.customerFeedback}
     onChangeText={customerFeedback => this.setState({ customerFeedback })}
     underlineColorAndroid="transparent"
 />

尝试一次，并检查世博会小吃expo-snack

希望对您有所帮助。有疑问请随意

Answer 2

我看到了您的代码，您还遗漏了一件事属性样式是 maxHeight。我将此添加到您的代码中，现在您可以将此代码复制并粘贴到您的项目中。

{/*maxHeight:200 */}
<TextInput
 style={{borderWidth: 1, borderColor: "#dedede", width: '90%',  marginTop: 20, borderRadius: 1,maxHeight:200}}
 placeholder={'Tell us more about our service'}
 multiline = {true}
 numberOfLines = {10}
 value={this.state.customerFeedback}
 onChangeText={customerFeedback => this.setState({ customerFeedback })}
 underlineColorAndroid="transparent"
/>

希望对您有所帮助:)

React-Native：无论 numberOfLines 道具如何，TextInput 大小都会自动增加

React-Native: TextInput size is getting increased automatically irrespective of numberOfLines prop

textinput

react-native