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

Question

我正在尝试用一些较大的文本自动填充 TextInput，这些文本需要比可用空间更多的空间才能完全呈现。一切正常，但文本从最后可见。我应该怎么做才能让文本从一开始就可见？

Answer 1

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

我使用了 TextInput 的选择属性 http://facebook.github.io/react-native/docs/textinput.html#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 否则光标将始终保持在我们设置它的位置(用户开始输入之前的文本长度)。