因为一直使用的是虚拟机测试,测试过程中也不怎么输入汉字进行测试,直到测试人员测试才发现问题。
原因: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) {
保存后,调试就可以了。