react-native 0.55.4 ios环境下不能输入汉字

it2022-05-05  132

因为一直使用的是虚拟机测试,测试过程中也不怎么输入汉字进行测试,直到测试人员测试才发现问题。

原因:react-native在0.55的版本下,TextInput组件有一些的bug!!不能使用它的 value 或 defaultValue 属性!!

代码如下:

情况1:

<TextInput     underlineColorAndroid="transparent"     style={{height: 40, flex:1,paddingHorizontal:6}}     onChangeText={(text) => this.setState({taskName : text})}     value={this.state.taskName}     //初始值为空字符串     placeholder='添加任务名称' />

情况2:

<TextInput      underlineColorAndroid="transparent"     multiline={true}     style={{          borderWidth: 1,          borderColor: '#E8E8E8',          borderRadius: 6,          height: 180,          padding: 10,          textAlignVertical:'top',     }}     defaultValue={this.state.taskDesc}       //初始值为空字符串     placeholder='请添加描述'     onChangeText={(text) => this.setState({taskDesc : text})} />

在以上两种情况下,用ios的自带输入法输入中文时,没有可以选择的中文字符,只能输入英文。(首先要确保测试机当前的语言环境是简体中文),如图

解决办法一:去除 value 或 defaultValue 属性!!!

即:

<TextInput     underlineColorAndroid="transparent"     style={{height: 40, flex:1,paddingHorizontal:6}}     onChangeText={(text) => this.setState({taskName : text})}     placeholder='添加任务名称' />

<TextInput      underlineColorAndroid="transparent"     multiline={true}     style={{          borderWidth: 1,          borderColor: '#E8E8E8',          borderRadius: 6,          height: 180,          padding: 10,          textAlignVertical:'top',     }}     placeholder='请添加描述'     onChangeText={(text) => this.setState({taskDesc : text})} />

解决办法二:修改原生组件

解决方案的地址:https://github.com/CHANOMA/react-native/pull/3/commits/169a0259be27813326f20e855901a26680ab98d4

1、首先打开 xcode的项目,找到 Libraries  --> RCTText.xcodeproj --> TextInput 文件夹 如图:

 2、上图箭头中指向的两个文件就是待会我们要修改的文件。

RCTBaseTextInputShadowView.m

在26行添加

NSString *_text;

在 104行添加

- (NSString *)text { return _text; } - (void)setText:(NSString *)text { _text = text; _previousAttributedText = _localAttributedText; }

RCTBaseTextInputView.m

314行的代码修改为

if (_onChange && backedTextInputView.markedTextRange == nil) {

保存后,调试就可以了。


最新回复(0)