Question

我正在尝试使用一些较大的文本自动填充TextInput，这些文本需要比可用空间更多的空间来渲染。一切正常，但文字从最后可见。我该怎么做才能从一开始就看到文字？

Answer 1

这实际上取决于你如何设置TextInput的样式。将TextInput包装在视图中并为其赋予flex 1以及View flex 1。然后确保同一行中的其他组件没有flex 1.这将为TextInput提供任何剩余空间。

Answer 2

我向您展示了基于onContentSizeChange扩展尺寸（宽度）的示例：https://snack.expo.io/@zvona/expanding-textinput

如果您对代码有任何疑问，请随时发表评论。

Answer 3

我找到了一个解决方案并发布，以便搜索的人可以找到它并节省时间。

我使用了TextInput http://facebook.github.io/react-native/docs/textinput.html#selection

的selection属性

我使用onBlur和onFocus事件来设置选择（位置光标）

这是代码示例（不是完整代码）：

    constructor(props) {
    super(props);
    this.state = {
        text: '',
        selection: {
            start: 0,
            end: 0
        }
    }
    render() {
         return <TextInput
                    value={this.state.text}
                    onChangeText={(text) => this.setState({ text })}
                    style={{
                        width: 100,
                        height: 40
                    }}
                    onBlur={() => {
                        this.setState({
                            selection: {
                                start: 0,
                                end: 0
                            }
                        })
                    }}
                    onFocus={() => {
                        this.setState({
                            selection: {
                                start: this.state.text.length,
                                end: this.state.text.length
                            }
                        }, () => {
                            this.setState({ selection: null })
                        })
                    }}
                    selection={this.state.selection}
                />
    }

说明：当组件安装时，初始位置保持为（0,0），当用户开始键入onFocus时，我首先在结尾处设置文本长度的位置（这样用户无需手动从头到尾跳转）和然后重置为null，否则光标将始终保持在我们设置它的位置（用户开始输入之前的text.length）。

自动填充React Native TextInput显示结束文本

3 个答案: