React Native Expo注册页TextInput输入单字符后iOS键盘闪退

问题现象 #

React Native开发的登录注册表单，iOS设备操作注册页TextInput时，输入单个字符后键盘立即闪退，需重新点击输入框唤起；安卓设备无此问题，且登录页实现逻辑与注册页一致但未出现该问题。

核心原因 #

查看Login.js代码发现，注册组件(Register)被错误嵌套在<Text>标签内：

<Text>
  <Register setShowComponent={this.setShowComponent} />
</Text>

在iOS的React Native渲染机制中，<Text>组件仅用于承载文本或嵌套其他<Text>组件，若放入View、TextInput等非文本组件，会触发组件树异常重渲染，导致TextInput失去焦点，键盘被迫收起。而登录页的TextInput直接放在<View>内，不存在这个问题。

解决方案 #

1. 移除Register外层的<Text>标签 #

将Login.js中的对应代码修改为用<View>包裹Register组件，或直接渲染：
修改前：

<Text>
  <Register setShowComponent={this.setShowComponent} />
</Text>

修改后（推荐）：

<View>
  <Register setShowComponent={this.setShowComponent} />
</View>

或简化为：

<Register setShowComponent={this.setShowComponent} />

2. 额外排查优化（可选） #

• 检查PasswordStrengthMeterBar组件是否频繁重渲染，可使用React.memo包裹优化：

const PasswordStrengthMeterBar = React.memo(({ password }) => {
  // 组件原有逻辑
});

• 确认Register组件的状态更新逻辑无异常，比如setUsername、setFullname等是否正确绑定对应状态值。

内容的提问来源于stack exchange，提问作者stavros