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

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

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

保存后,调试就可以了。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Native是一个用于构建跨平台移动应用的开源框架。它允许开发者使用JavaScript和React的语法来编写移动应用,并且可以同时在iOS和Android平台上运行。 要打包React Native应用为iOS应用,可以按照以下步骤进行操作: 1. 配置Xcode环境:首先,确保你的电脑上已经安装了Xcode,并且已经配置好了iOS开发环境。 2. 创建React Native项目:使用React Native的命令行工具创建一个新的项目,可以通过运行以下命令来创建一个新的React Native项目: ``` npx react-native init MyApp ``` 3. 进入项目目录:进入到项目的根目录,可以使用以下命令进入项目目录: ``` cd MyApp ``` 4. 打开Xcode工程:使用Xcode打开iOS工程文件(.xcodeproj),可以通过运行以下命令来打开Xcode: ``` open ios/MyApp.xcodeproj ``` 5. 配置签名和证书:在Xcode中,选择你的项目,在"Signing & Capabilities"选项卡中配置你的开发者账号和证书。 6. 选择目标设备:在Xcode中,选择你要构建的目标设备,可以是模拟器或者真机。 7. 构建应用:点击Xcode中的"Build"按钮来构建应用,或者使用快捷键"Command + B"。 8. 运行应用:点击Xcode中的"Run"按钮来运行应用,或者使用快捷键"Command + R"。 以上是打包React Native应用为iOS应用的基本步骤。在实际开发中,可能还需要进行一些其他的配置和调整,例如添加依赖库、处理权限等。具体的操作可以参考React Native官方文档或者相关的教程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值