Javascript 当内容变大时，如何在React Native中滚动文本输入？

我目前有一个自动增长的文本输入字段，它将扩展到某个固定高度

问题是，一旦文本输入增长到其最大大小，我编写的内容就会被推到容器下面。见附件图片

发行前：

发行后：

我想让文本输入滚动到末尾，但我还没有找到任何文档或API允许我

滚动到输入的末尾。（类似于滚动视图

）

最后一个功能是聊天应用程序消息框

代码：

import React, { Component } from 'react';
import { View, TextInput } from 'react-native';

function clamp(num, min, max) {
      return num <= min ? min : num >= max ? max : num;
}

class AutogrowTextInput extends Component {
    constructor(props) {
        super(props);
        this.state = {'contentHeight': props.minHeight};

    this.resize = this.resize.bind(this);
}

render() {
    let height = clamp(this.state.contentHeight, this.props.minHeight, this.props.maxHeight) + 20;
    let inputStyle = {height: height, flex: 0};

    return (
        <TextInput
            {...this.props}
            style={[this.props.style, inputStyle]}
            onContentSizeChange={this.resize}
            underlineColorAndroid="transparent"
        />
    );
}

resize(event) {
    this.setState({
        'contentHeight': event.nativeEvent.contentSize.height,
    });
    }
}

export default AutogrowTextInput;

提前谢谢

---

由于缺乏声誉，PS.无法在网上发布图片。

Hey@Johnnie Tirado！“自动增长文本输入字段”您对react使用的是常规文本输入吗？@a-J-a，正确，我创建了一个组件，可以自动增长包含文本输入的容器。当容器达到道具设置的最大高度且TextInput使用其本机滚动视图功能时，我的问题就出现了。它不会自动滚动到输入的末尾。我有一个建议，您可以使文本输入在键入时自动增长，而不是容器本身，这样可以解决您的问题。听起来不错？@A-J-A添加了代码，我只是试着这么做，但得到了相同的行为。如果有什么突出的地方，请告诉我。谢谢。你能评论一下钳位功能并检查是否是问题所在吗？

    return (
    <View style={style.footer}>
        <TouchableIcon
            onPress={this._attach}
            icon="add"
            color="#000"
        />
        <AutogrowTextInput
            underlineColorAndroid="transparent"
            style={style.input}
            placeholder="Send Message"
            value={message}
            onChangeText={this._changeText}
            autoFocus={false}
            multiline={true}
            minHeight={30}
            maxHeight={100}
        />
        {attachmentComps}
        <TouchableIcon
            disabled={sending || isEmpty}
            onPress={this._sendMessage}
            icon="send"
            color="#000"
        />
    </View>
);

footer: {
    borderTopWidth: StyleSheet.hairlineWidth,
    borderColor: '#ccc',
    paddingVertical: 4,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    backgroundColor: '#fff',
    flex: 0
},
input: {flexGrow: 1, fontSize: 16, paddingHorizontal: 10, paddingVertical: 1},
attachmentContainer: {marginHorizontal: 4},
attachment: {height: 40, width: 40, borderRadius: 2},