android - React Native - 设置 TextInput 光标位置

Question

在我的 React Native 应用程序中，我试图将 TextInput 的光标位置设置到特定位置(例如，到第 5 个字符)，但由于缺少文档，我很难这样做一点。我怀疑它与 TextInput 的“setSelection”属性有关，但我似乎不知道该怎么做。

有人成功过吗？

谢谢。

Answer 1

正如@this.lau_ 所说，有一个名为selection 的受控属性，它接受一个带有开始和结束键的对象。

例子:

class ControlledSelectionInput extends Component {
    state = {
        selection: {
            start: 0,
            end: 0
        }
    }

    // selection is an object: { start:number, end:number }
    handleSelectionChange = ({ nativeEvent: { selection } }) => this.setState({ selection })

    render() {
        const { selection } = this.state;

        return <TextInput selection={selection} onSelectionChange={this.handleSelectionChange} />
    }
}

您还可以通过获取组件的引用并使用 setNativeProps 以编程方式设置选择，如下所示:

this.inputRef.setNativeProps({ selection:{ start:1, end:1 } })

例子:

class SetNativePropsSelectionInput extends Component {
    inputRef = null

    render() {
        const { selection } = this.state;

        return (
            <View>
                <TextInput ref={this.refInput} />
                <Button title="Move selection to start" onPress={this.handleMoveSelectionPress} />
            </View>
    }

    refInput = el => this.inputRef = el

    handleMoveSelectionPress = () => this.input.setNativeProps({
        selection: {
            start: 0,
            end: 0
        }
    })
}