在本机反应中输入文本时如何在文本输入中制作第二行？

Question

如果我在 textInput 中输入超过 10 个字符，我想要第二行。如果输入超过 5 个字符，我已经更改了文本的字体大小。那很好用。

但是如果我输入超过 11 个字符，它应该在第二行出现

请帮我清除这个

这是我的代码...

_onChangeText(text) {
     this.setState({ fontSize: (text.lenght > 6 ? 40 : 80) });
 }

 render() {
return (
  // Giving an array of objects to style property can help                                                    
 you to define a default value
      <TextInput 
          onChangeText={this._onChangeText.bind(this)}
          style={[ {fontSize: 80}, {fontSize: this.state.fontSize} ]}
     />
   )
}

Answer 1

使用 multiline（布尔值）属性检测何时需要显示多行。

_onChangeText(text) {
  const areCharsExceeded = text.length > 10;

  this.setState({ areCharsExceeded });
}

 <TextInput
  multiline={this.state.areCharsExceeded}
  onChangeText={this._onChangeText.bind(this)}
/>

Answer 2

将 multiline 属性设置为 true。号码不需要检查。字符。它会自动处理编号。根据宽度可以容纳的字符数。对我来说完全没问题 ->

如果您有 10 个字符的特定要求，则在字符长度达到 10

后立即将 multiline 的值设置为 true

可用文档 here

Answer 3

你可以这样做，

state = {
  fontSize: 80,
  inputValue: ''
}

onChangeText(event) {
  this.setState({
    fontSize: event.nativeEvent.text.length > 6 ? 40 : 80,
    inputValue: event.nativeEvent.text
  });
}

render() {
return (
  < TextInput
    multiline
    onChange={(event) =>
      this.onChangeText(event)
    }
    onContentSizeChange={(event) => {
      this.setState({ height: event.nativeEvent.contentSize.height })
    }}
    value={this.state.inputValue}
    style={{ fontSize: this.state.fontSize, height: Math.max(35, 
    this.state.height) }}
  />
    )
  }
}

设置多行并处理文本输入的高度

在本机反应中输入文本时如何在文本输入中制作第二行？

How to make second line in text Input while entering text in react native?

onchange

textinput

react-native