reactnative在文本框光标处插入文字的实现方法

效果展示：

注意：如果使用了scroll滚动插件，需要使用keyboardShouldPersistTaps="always"方法防止键盘阻止按钮被触发，上篇文章有介绍：

https://blog.csdn.net/ywl570717586/article/details/102505241

render中的简略代码：

render () {
	const listItems = this.state.pianyuList.map((item,index) =>
		<TouchableOpacity 
		key={index}
		onPress={() => this.insertString('', item.TemplateName)}>
			<Text>{item.TemplateName}</Text>
		</TouchableOpacity>
	);
	return (
		<View>
			<KeyboardAwareScrollView style={{flex: 1}} keyboardShouldPersistTaps="always">
				<View style={{}}>
					<TextInput 
					ref={"FindingsDescribe"} 
					placeholder="请输入会诊描述" 
					multiline = {true} 
					underlineColorAndroid="transparent"
					onChangeText={(FindingsDescribe) => this.setState({FindingsDescribe})}
					value={this.state.FindingsDescribe}
					></TextInput>
				</View>
				<View>
					<TextInput 
					ref={"Conclusion"} 
					underlineColorAndroid="transparent"
					onChangeText={(Conclusion) => this.setState({Conclusion})}
					placeholder="请输入会诊结论" 
					multiline = {true} 
					value={this.state.Conclusion}
					></TextInput>
				</View>
				<View>
					<Text}}>快速录入</Text>
					<View>
						{listItems}
					</View>
				</View>
			</KeyboardAwareScrollView>
		</View>
	);
}
           

逻辑代码：

insertString (type, symbol) {
	// 获取光标所在的textinput的ref，可实现在光标出添加文字
	if(this.refs.FindingsDescribe.isFocused()){
		type = "FindingsDescribe"
	}
	else if(this.refs.Conclusion.isFocused()){
		type = "Conclusion"
	} else {
		return;
	}
	// _lastNativeSelection:光标所在位置，若未初始化，则赋值为{start: 0, end: 0}
	let selection = this.refs[type]._lastNativeSelection || {start: 0, end: 0};
	let obj = {};
	// 在光标位置处插入文字
	obj[type] = this.state[type].substr(0, selection.start) + symbol + this.state[type].substr(selection.end);
	// 插入完成后把光标位置后移到恰当位置
	this.setState({...obj}, () => {
		setTimeout(()=>{
			this.refs[type].setNativeProps({
				selection : { start : selection.start+symbol.length, end : selection.start+symbol.length}
			})
		})
	});
}
           

这样就可以实现需求了，注意有个地方写法有两种，作用是一样的：

<TextInput 
ref={"FindingsDescribe"} 
placeholder="请输入会诊描述" 
multiline = {true} 
underlineColorAndroid="transparent"
onChangeText={(FindingsDescribe) => this.setState({FindingsDescribe})}
value={this.state.FindingsDescribe}
></TextInput>
           

<TextInput 
ref={component => this.FindingsDescribeRef = component}
placeholder="请输入会诊描述" 
multiline = {true} 
underlineColorAndroid="transparent"
onChangeText={(FindingsDescribe) => this.setState({FindingsDescribe})}
value={this.state.FindingsDescribe}
></TextInput>
           

这两种方式区别在于调用时的写法会有不同：

// 第一种调用方法
this.refs[type]._lastNativeSelection
// 第二种调用方法
this.FindingsDescribeRef._lastNativeSelection
           

完成。