如何在文字環繞時增加<TextInput>高度？

我試圖創建一個<TextInput>，當文本換行到下一行時，它可以在高度上增長，類似於Slack的消息輸入隨文本達到一個點而增長。如何在文字環繞時增加<TextInput>高度？

Slack input

我有multiline道具組，因此它被包裹，但文檔似乎不提關於包裝的任何事件，我能想到的唯一的事情是一個非常哈克戰略，以字符數找出何時增加輸入的高度。我怎麼做到這一點？ https://facebook.github.io/react-native/docs/textinput.html

來源

2015-10-12 Ryan McDermott

[作出多，與之反應本土擴張的TextInput]的可能的複製（http://stackoverflow.com/questions/31475187/making-a-multiline-expanding-textinput-with-react-native） – tohster

由於反應本土DOC：https://facebook.github.io/react-native/docs/textinput.html

你可以做這樣的事情：

class AutoExpandingTextInput extends React.Component { 
    state: any; 

    constructor(props) { 
    super(props); 
    this.state = {text: '', height: 0}; 
    } 
    render() { 
    return (
     <TextInput 
     {...this.props} 
     multiline={true} 
     onChange={(event) => { 
      this.setState({ 
      text: event.nativeEvent.text, 
      height: event.nativeEvent.contentSize.height, 
      }); 
     }} 
     style={[styles.default, {height: Math.max(35, this.state.height)}]} 
     value={this.state.text} 
     /> 
    ); 
    } 
}

來源

2016-05-31 08:22:29

這是很好的答案。但我的問題是：我有兩個文本輸入字段，我用上面的答案。當我在一個文本輸入字段中鍵入內容時，另一個也會同時增長。可以做些什麼來解決這個問題，這樣一次只能增加一個文本輸入？ –

您是否在兩個輸入中使用相同的狀態值？就像在'onChange'中一樣，當你使用'setState'時，爲每一個創建一個唯一的鍵，比如'textUsername'和'heightUsername'，並且用在'value'的道具和樣式中，對其他輸入做同樣的處理一個人會獨自生長。 –

@Satan稍遲，但您需要使用AutoExpandingTextInput作爲它自己的組件，而不是直接插入當前組件。 – Hobbyist

由於陣營本地0.46.1：

contentSize財物被刪除TextInput.onChange事件

如果你使用這個版本，你可以處理onContentSizeChange道具

從the Jérémy answer，我們有

class AutoExpandingTextInput extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     text: '', 
     height: 0 
    }; 
    } 

    render() { 
    return (
     <TextInput 
     {...this.props} 
     multiline={true} 
     onChangeText={(text) => { 
      this.setState({ text }) 
     }} 
     onContentSizeChange={(event) => { 
      this.setState({ height: event.nativeEvent.contentSize.height }) 
     }} 
     style={[styles.default, {height: Math.max(35, this.state.height)}]} 
     value={this.state.text} 
     /> 
    ); 
    } 
}

來源

2017-07-11 09:43:59

謝謝！但是，如果我爲我的輸入設置了最大高度 'onContentSizeChange = {（event）=> {currentLine = event.nativeEvent.contentSize.height; （currentHeight> 100）{current_eight = 100;}; } this.setState（{ inputHeight：currentHeight }） }}' 和我有很多它的文本，它不會滾動到高度設置100後下方，如何解決售後服務這個問題？ – Kholiavko

在iPhone上都很好，但在Android上我有這個問題。 – Kholiavko

當我點擊時，我得到這個工作，但當行換行時不行。 contentSize.height總是14，只要我輸入一個非常長的行幾次包裝;但只要我爲新線打，它就增加到28.只有按會增加高度，而不是包裝。 –

如何在文字環繞時增加<TextInput>高度？

回答

相關問題