Question

我正在尝试创建一个<TextInput>，当文本换行到下一行时，它可以在高度上增长，类似于Slack的消息输入随着文本增长到一点而增长。

Slack input

我有multiline道具集，所以它正在包装，但文档似乎没有提及任何关于包装的事件，我唯一能想到的是一个真正的hacky策略来计算字符数何时增加输入的高度。我怎么做到这一点？ https://facebook.github.io/react-native/docs/textinput.html

Answer 1

感谢react-native 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}
      />
    );
  }
}

0.46.1或更高:(由NicolasdeChevigné解释）

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}
      />
    );
  }
}

Answer 2

自React Native 0.46.1：

已从 TextInput.onChange 事件中删除
contentSize 属性

如果您使用此版本，则可以处理onContentSizeChange prop

来自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}
      />
    );
  }
}

Answer 3

您应该在maxHeight：

中设置style属性

<TextInput multiline style={{maxHeight: 80}} />

在这里演示：https://snack.expo.io/@yairopro/multiline-input-with-max-height

Answer 4

我的回答是在TextInput中使用override func layoutSubviews () { super.layoutSubviews() //Set the self.photo frame }和val result: Future[String] = responseFuture.flatMap { case HttpResponse(StatusCodes.OK, _, e, _) => Unmarshal(e).to[String] case HttpResponse(status, _, e, _) => e.discardBytes() //all entities should be consumed or discarded, so... Future.failed(new InvalidHttpStatus(s"service returned ${status.intValue()}")) }道具，当然打开onContentSizeChange，这是我的解决方案：

numberOfLines

18是文本的高度，可能取决于fontSize

Answer 5

我要做的是将“输入最大高度”设置为“视图”，例如：

messageBox: {
maxHeight: 110,
width: '80%',
borderRadius: 10,
padding: 10,
backgroundColor: Color.White},

并将“输入”设置为多行：

<View style={[styles.messageBox, styles.managerMsg]}>
  <Input
    allowFontScaling={false}
    name="notes"
    blurOnSubmit={false}
    onChangeText={notes => console.log(notes)}
    returnKeyType="go"
    onSubmitEditing={() => Keyboard.dismiss()}
    multiline
  />
</View>

此“输入”只是一个简单的自定义组件，可以接收所有道具。

Answer 6

您不妨尝试这样的事情。

<TextInput style={[styles.inputs,{height: Math.max(35, this.state.height)}]}
                placeholder="Write a message..."
                multiline={true}                
                onChangeText={(msg) => this.setState({ text: msg })}
                onSubmitEditing={Keyboard.dismiss}
                onContentSizeChange = {() => this.scrollView.scrollToEnd({animated:true})}
               
              />

style.inputs

  inputs: {
    
    minHeight:40,
    marginLeft: 16,
    paddingTop: 10,
    overflow:'hidden',
    padding: 15,
    paddingRight: 25,
    borderBottomColor: '#000000',
    flex: 1,
    position: 'absolute',
    width: '100%',


  },

当文本超过一行时，将在文本输入字段中创建一个滚动视图，并自动滚动到底部。当内容增长时，这实际上并不会增加文本输入的高度，而是会在输入字段中创建滚动视图。服务宗旨。我正在发布我的解决方案，因为其他解决方案对我不起作用（文本输入大小在键盘后面增大，并且存在文本溢出问题）。因此，对于像我一样遇到类似问题的任何人，这都希望对您有用。

Answer 7

<View style={{flex:1}}>
    <TextInput
        multiline={true} />
</View>

Answer 8

高度：{40}它不会增长，所以我不得不使用 minheight 作为输入和输入所在的视图，以便它们可以一起成长。它在 React 0.63 中对我有用。

如何在文本换行时增加<textinput>高度？

8 个答案: