React Native Android 11设备IllegalViewOperationException问题求助

我之前在React Native 0.62.x版本的Android 11设备上也碰到过完全一样的问题——当输入框有内容时切换页面就报错，空输入却没事。这个问题的根源是Android 11对输入法生命周期的管控更严格，当TextInput组件被卸载时，系统输入法还在尝试向已销毁的视图发送命令，从而触发了这个异常。

下面是几个亲测有效的解决方案，按推荐程度排序：

方案1：手动让TextInput失焦（最稳妥） #

通过useRef获取TextInput的引用，在切换页面之前先调用blur()方法让输入框失焦，这样能让输入法提前断开和该视图的关联。

修改后的代码如下：

import React, { useRef, useState } from 'react';
import { TouchableHighlight, Text, View, TextInput } from 'react-native';

const TestScreen = () => {
  const [page, setPage] = useState(0);
  // 创建输入框引用
  const titleInputRef = useRef(null);

  const navigateToNextPage = () => {
    // 先让输入框失焦，再切换页面
    titleInputRef.current?.blur();
    setPage(page + 1);
  };

  return (
    <View style={{ flex: 1, marginTop: 30, flexDirection: 'column', position: 'relative' }} >
      {page === 0 && (
        <View>
          {/* 绑定引用到TextInput */}
          <TextInput ref={titleInputRef} placeholder='Title' />
          <TouchableHighlight onPress={navigateToNextPage}>
            <Text style={{ color: '#fff' }}>press</Text>
          </TouchableHighlight>
        </View>
      )}
      {page === 1 && (
        <View>
          <Text style={{ color: '#fff' }}>Hello</Text>
          <TouchableHighlight onPress={() => setPage(page - 1)}>
            <Text style={{ color: '#fff' }}>press</Text>
          </TouchableHighlight>
        </View>
      )}
    </View>
  );
};
export default TestScreen;

方案2：手动隐藏系统键盘 #

如果不想单独处理每个输入框，也可以直接调用Keyboard.dismiss()强制隐藏键盘，同样能达到断开输入法和视图关联的效果：

import React, { useState } from 'react';
import { TouchableHighlight, Text, View, TextInput, Keyboard } from 'react-native';

const TestScreen = () => {
  const [page, setPage] = useState(0);

  const navigateToNextPage = () => {
    // 先隐藏键盘，再切换页面
    Keyboard.dismiss();
    setPage(page + 1);
  };

  // 其余代码和原示例一致...
};
export default TestScreen;

方案3：升级React Native版本（彻底解决） #

这个问题是React Native在旧版本（0.62.x、0.63.x）和Android 11之间的兼容性bug，在React Native 0.64及以上版本中已经被官方修复。如果你的项目依赖允许的话，升级RN版本是一劳永逸的解决方式，但需要注意处理依赖包的兼容性（比如react-native-reanimated、react-native-screens等库可能需要同步升级）。

补充说明 #

为什么输入框为空时不会报错？因为当输入框为空时，输入法可能没有激活完整的交互状态，切换页面时不会残留未完成的命令发送；而输入内容后，输入法处于活跃状态，会持续和TextInput视图通信，此时卸载视图就会导致命令发送到不存在的视图上，触发异常。

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