如何在文本输入中输入文本中的第二行反应本机？

Question

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

但是，如果我输入11个以上的char，它应该在第二行输入

请帮我清除这个

这是我的代码......

_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。不需要检查。的人物。它会自动处理否。它可以根据宽度容纳的字符。对我来说完全没问题 - ＆gt;

如果您有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) }}
  />
    )
  }
}

设置多行并处理textinput的高度