问题表现
- 初始未输入字符时,输入框光标正常居中
- 输入字符后,输入框光标正常位于文字之后
- 删除字符同时还有剩余文字,输入框光标正常位于文字之后
- 删除最后一个文字后,输入框光标跳动到组件末尾
复现步骤
- 使用 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} // 忽略其他属性就好,只有这行能解决本文所述问题
/>