React Native TextInput在多线程时自动增长

qgzx9mmu  于 2023-04-12  发布在  React
关注(0)|答案(5)|浏览(140)

我想创建一个TextInput,它可以自动增长时,它有多行。

<TextInput
            placeholder="Type Comment"
            value={this.state.comment.value}
            onChangeText={value => this.onChangeComment(value)}
            onPress={() => this.uploadComment()}
            multiline={true}
            maxLength={200}
            numberOfLines={5}
          />

我如何才能做到这一点?

smtd7mpg

smtd7mpg1#

想想React Native团队在当前版本(0.59)中使用multiline prop修复了它。
这对我很有效

<TextInput
    style={{
      width: '90%',
      borderColor: 'gray',
      borderWidth: 1,
      padding: 2,
    }}
    multiline
    onChangeText={text => this.setState({ text })}
    value={this.state.text}
  />
brvekthn

brvekthn2#

要实现自动增长多行文本输入,您可以根据textInput中的内容大小调整文本输入的高度。
你可以在TextInput中使用onContentSizeChange属性,并调用一个函数来增加/减少输入的高度。
下面是快速示例代码

export default class YourComponent extends Component {

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

  updateSize = (height) => {
    this.setState({
      height
    });
  }

  render () {
    const {newValue, height} = this.state;

    let newStyle = {
      height
    }

    return (
    <TextInput
      placeholder="Your Placeholder"
      onChangeText={(value) => this.setState({value})}
      style={[newStyle]}
      editable
      multiline
      value={value}
      onContentSizeChange={(e) => this.updateSize(e.nativeEvent.contentSize.height)}
    />
    )
  }

}


您可能需要使用react-native-auto-grow-textinput

ukxgm1gy

ukxgm1gy3#

使用React钩子

只是为了补充Shivam的答案,这里是带有钩子的版本:

import React, { useState } from 'react'

export default function MyTextInput(props) {
    const [height, setHeight] = useState(42)
    return <TextInput
        style={styles.input, {height: height}}
        onContentSizeChange={e => setHeight(e.nativeEvent.contentSize.height)} />
}
ryevplcw

ryevplcw4#

为此使用模块

import {AutoGrowingTextInput} from 'react-native-autogrow-textinput';

return (
  <AutoGrowingTextInput 
    style={styles.textInput} 
    placeholder={'Your Message'}
    value={value}
  />
)

链接:https://www.npmjs.com/package/react-native-autogrow-textinput

pdtvr36n

pdtvr36n5#

对于其他人想知道如何让它增长和收缩的新线这里是我所做的。

const [text,setText] = useState('');
const [textHeight,setTextHeight = useState(35);
    
<TextInput
   style={{height:textHeight,maxHeight:200}}
   value={text}
   multiline
   onChangeText={(e)=>{
      setText(e);
      setTextHeight(35 + (e.split('\n').length-1) * 20);
   }}
/>

相关问题