RN——TextInput 文本框删除最后一个字符，光标移动到组件末尾

最新推荐文章于 2025-04-27 10:05:05 发布

原创最新推荐文章于 2025-04-27 10:05:05 发布 · 595 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native #react.js #javascript

本文介绍了一个React Native中TextInput组件在设置文本居中时出现的光标位置异常问题及解决方案。通过设置multiline属性为true，可以解决光标跳动的问题。

问题表现

初始未输入字符时，输入框光标正常居中
输入字符后，输入框光标正常位于文字之后
删除字符同时还有剩余文字，输入框光标正常位于文字之后
删除最后一个文字后，输入框光标跳动到组件末尾

复现步骤

使用 react-native 的 TextInput 组件
设置输入框的文本居中 style: { textAlign: 'center'}

问题解决

TextInput 组件设置为多行文本
添加属性 multiline={true}

<TextInput
    placeholder={'请输入20位邀请码'}
    placeholderTextColor={xxx}
    fontSize={xxx}
    onChangeText={this._onChangeText}
    maxLength={20}
    value={this.state.inviteCode}
    underlineColorAndroid={'transparent'}
    disableFullscreenUI={true}
    multiline={true} // 忽略其他属性就好，只有这行能解决本文所述问题
/>