React Native TextInput移动端浏览器异常：仅可输入单个字符

这是个挺典型的跨浏览器兼容问题，结合你给出的React Native Web组件代码和场景，我整理了几个最可能的原因和对应的排查/解决方法：

1. 样式对象频繁更新导致输入框失焦 #

从代码里的styleManager.getScope("login")来看，如果这个方法每次组件渲染时都会返回全新的样式对象，那么TextInput的style属性会在每次输入字符触发状态更新时都发生变化，进而触发组件重新渲染。在Safari的渲染机制下，这种频繁的重渲染很容易导致输入框失去焦点——你输入一个字符后，输入框就失焦了，自然没法继续输入。

排查方法 #

在组件内部添加日志，对比每次渲染时样式对象的引用是否一致：

const styles = styleManager.getScope("login");
const prevStyles = useRef(styles);

useEffect(() => {
  console.log("样式对象是否更新：", styles !== prevStyles.current);
  prevStyles.current = styles;
});

解决方案 #

用useMemo缓存样式对象，确保它只在必要时更新：

const styles = useMemo(() => styleManager.getScope("login"), []);

2. onChangeText回调引用不稳定引发的重渲染 #

你当前的onChangeText是内联箭头函数，每次组件渲染时都会创建新的函数实例。虽然React的diff算法通常能处理这种情况，但Safari对组件更新的敏感度更高，可能会因为回调引用变化触发不必要的重渲染，间接导致输入框失焦。

解决方案 #

用useCallback包裹回调函数，保持函数引用的稳定性：

const handleUsernameChange = useCallback((text: string) => {
  setUsername(text);
}, []);

const handlePasswordChange = useCallback((text: string) => {
  setPassword(text);
}, []);

// 在TextInput中使用
<TextInput 
  style={styles["username"]} 
  placeholder="Username or Email" 
  autoFocus={true} 
  onChangeText={handleUsernameChange} 
/>
<TextInput 
  style={styles["password"]} 
  placeholder="Password" 
  secureTextEntry={true} 
  onChangeText={handlePasswordChange} 
/>

3. Safari与Chrome的状态更新批处理差异 #

Chrome会自动批量处理React的状态更新，但Safari（尤其是旧版本）可能不会。当你输入一个字符触发setUsername/setPassword时，组件会立即重新渲染，导致输入框瞬间失焦。

解决方案 #

• 如果你使用的是React 18之前的版本，可以尝试用unstable_batchedUpdates手动批量更新状态；
• 直接升级到React 18，它默认在所有事件回调中都启用了批量更新，能解决大部分这类问题。

4. autoFocus属性的干扰 #

第一个TextInput设置了autoFocus={true}，每次组件重新渲染时都会尝试自动聚焦到用户名输入框。如果你在密码框输入字符，状态更新触发组件重渲染后，autoFocus会把焦点拉回用户名输入框，导致密码框只能输入一个字符。

解决方案 #

让autoFocus只在组件首次渲染时生效：

const isFirstRender = useRef(true);

useEffect(() => {
  isFirstRender.current = false;
}, []);

// 修改TextInput的autoFocus属性
<TextInput 
  style={styles["username"]} 
  placeholder="Username or Email" 
  autoFocus={isFirstRender.current} 
  onChangeText={handleUsernameChange} 
/>

5. React Native Web的兼容性bug #

不同浏览器对React Native Web的支持存在差异，有可能是TextInput在Safari中的实现存在特定bug。

解决方案 #

• 检查并升级React Native Web到最新稳定版本；
• 尝试给TextInput添加inputMode属性（比如inputMode="text"），明确指定输入类型，帮助Safari正确处理输入事件。

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