react native TextInput光标位置定位详解

最近开发公司的项目，做了个输入框光标位置的功能，坑挺多，抽出了时间整理了下遇到的问题，希望给大家一些帮助。

WechatIMG147.jpeg

参考官方文档

<TextInput style={styles.textInputStyle}
                               value={this.state.textValue}
                               onChangeText={(value) =>{
                                                   this.setState({textValue: value});
                                               }}
                               placeholder='请输入内容'
                               underlineColorAndroid="transparent"
                               ref={t=>this.textInput=t}
                    />

官方各个版本不同，会有一些输入不了的中文的bug，本人亲测，最新的57和53版本以及以前的版本，onChangeText={(value) =>{ this.setState({textValue: value});}}是没问题的，但是在53以后的新版本，这么写就不能输入中文，可以换成onChangeText={(value) =>{this.state.textValue= value}}。当然还有修改源码的解决方法，不需这么写，见此链接，不过不推荐修改源码。

下面做个例子，比如当需要添加一个【】然后光标定位在括号中间位置时，

add(){
        this.textInput.focus()
        let selection = this.textInput._lastNativeSelection || null;
        if (!this.state.textValue){
            this.setState({
                textValue : this.state.textValue + "【】"
            },()=>{
                let position =  this.state.textValue.length - 1
                this.textInput.focus()
                setTimeout(()=>{
                    this.textInput.setNativeProps({
                        selection : { start : position, end : position}
                    })
                },10)
            })
        }else if(selection !=null && selection.start == selection.end) {
           let startStr = this.state.textValue.substr(0 , selection.start)
           let endStr = this.state.textValue.substr(selection.start)
           this.setState({
                textValue : startStr + "【】" + endStr
            },()=>{
               this.textInput.focus()
                setTimeout(()=>{
                    this.textInput.setNativeProps({
                        selection : { start : selection.start+1 , end : selection.start+1}
                    })
                },10)
            })
        } else {
            this.setState({
                textValue : this.state.textValue + "【】"
            },()=>{
                let position =  this.state.textValue.length - 1
                this.textInput.focus()
                setTimeout(()=>{
                    this.textInput.setNativeProps({
                        selection : { start : position, end : position}
                    })
                },10)
            })

        }

如果需要在对应的位置添加用【】包含的一段文字，可以这么写：

add(data){
        this.textInput.focus()
        let selection = this.textInput._lastNativeSelection || null;
        if (!this.state.textValue){
            this.setState({
                textValue : this.state.textValue + `【${data}】`
            },()=>{
                let position =  this.state.textValue.length
                this.textInput.focus()
                setTimeout(()=>{
                    this.textInput.setNativeProps({
                        selection : { start : position, end : position}
                    })
                },10)
            })
        }else if(selection !=null && selection.start == selection.end) {
            let startStr = this.state.textValue.substr(0 , selection.start)
            let endStr = this.state.textValue.substr(selection.start)
            this.setState({
                textValue : startStr + `【${data}】` + endStr
            },()=>{
                this.textInput.focus()
                setTimeout(()=>{
                    this.textInput.setNativeProps({
                        selection : { start : this.state.textValue.length , end : this.state.textValue.length}
                    })
                },10)
            })
        } else {
            this.setState({
                textValue : this.state.textValue + `【${data}】`
            },()=>{
                let position =  this.state.textValue.length
                this.textInput.focus()
                setTimeout(()=>{
                    this.textInput.setNativeProps({
                        selection : { start : position, end : position}
                    })
                },10)
            })
        }
    }