Question

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

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

发行前：

Expanded view, before issue

发布问题：

Cursor has disappeared from view

我虽然将文本输入滚动到最后，但我还没有找到任何允许我scrollTo结束输入的文档或API。（类似于ScrollView）

最终功能是聊天应用程序消息框的功能。

代码：

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;

元素的实例化。

    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},

提前致谢。

P.S。由于缺乏声誉，无法在线发布图片。

如何在内容变大的情况下滚动React Native中的文本输入？

0 个答案: