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

最新推荐文章于 2023-07-12 19:17:27 发布

daniel1227

最新推荐文章于 2023-07-12 19:17:27 发布

阅读量589

点赞数 1

分类专栏： react-native 文章标签： react-native ios 中文 0.55

本文链接：https://blog.youkuaiyun.com/daniel1227/article/details/96430972

版权

react-native 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了React Native 0.55版本中TextInput组件存在的中文输入问题，并提供了两种解决方案：一是移除value或defaultValue属性；二是修改原生组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

原因：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) {

保存后，调试就可以了。