集成Stack.Navigator后出现跨线程同步调用匿名函数错误求助

原本项目运行正常，集成Stack.Navigator后抛出错误：Tried to synchronously call anonymous function from a different thread using Stack.navigator

错误截图：

使用的Stack.Navigator代码： #

<NavigationContainer>
    <Stack.Navigator initialRouteName="Auth" screenOptions={{headerShown: false}} >
        <Stack.Screen name="Register" component={Register} />
        <Stack.Screen name="ChooseLanguage" component={ChooseLanguage} />
    </Stack.Navigator>
</NavigationContainer>

依赖库版本： #

"@react-native-async-storage/async-storage": "^1.17.10",
"@react-navigation/native": "^6.0.13",
"@react-navigation/stack": "^6.3.4",
"jsc-android": "^250230.2.1",
"react": "17.0.2",
"react-dom": "^16.13.1",
"react-native": "0.65.1",
"react-native-gesture-handler": "^1.9.0",
"react-native-paper": "5.0.0-rc.9",
"react-native-reanimated": "2.3.1",
"react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.18.2",
"react-native-svg": "^13.5.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "^0.15.5"

1. 完善Reanimated的Babel配置

   • 打开项目的babel.config.js，确保添加Reanimated的插件：

     module.exports = {
       presets: ['module:metro-react-native-babel-preset'],
       plugins: ['react-native-reanimated/plugin'],
     };
     

   • 配置完成后必须清除缓存并重启Metro服务：

     npx react-native start --reset-cache
     

2. 确保导航组件在主线程初始化

   • 不要在异步回调或子线程逻辑中直接渲染NavigationContainer，如果有异步初始化操作（比如读取AsyncStorage的路由配置），先完成异步逻辑再渲染导航：

     const App = () => {
       const [isReady, setIsReady] = useState(false);
     
       useEffect(() => {
         const init = async () => {
           // 执行异步初始化操作，比如读取用户配置
           await AsyncStorage.getItem('someKey');
           setIsReady(true);
         };
         init();
       }, []);
     
       if (!isReady) {
         return <ActivityIndicator />;
       }
     
       return (
         <NavigationContainer>
           {/* 你的Stack.Navigator代码 */}
         </NavigationContainer>
       );
     };
     

3. 调整依赖版本适配性

   • 当前react-native-reanimated@2.3.1与react-native@0.65.1存在线程兼容性问题，可升级Reanimated到适配0.65.x的稳定版本：

     npm install react-native-reanimated@2.8.0 --save
     

   • 若升级后仍有异常，可同步升级react-native-gesture-handler到2.5.0版本，确保与React Native版本匹配。

4. 排查页面组件的线程操作

   • 检查Register、ChooseLanguage组件中是否存在子线程直接更新React状态的代码（比如在AsyncStorage回调、setTimeout中直接调用setState），这类操作需用InteractionManager.runAfterInteractions包裹，确保在主线程执行：

     InteractionManager.runAfterInteractions(() => {
       setSomeState(updatedValue);
     });
     

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