React Native Paper Provider 和 React Navigation NavigationContainer 在 React Native Web 中导致错误

问题描述

我是 React-native 和 React-native-web 的初学者。我目前正在处理一个使用 React-Native-paper 和 @react-navigation/native 库的现有项目。我正在尝试使用现有代码/项目作为 Web 应用程序运行。但是当我在 App.js 中使用以下代码时，我在运行 Web 应用程序的控制台中收到一个错误：

import React from 'react';
import {Provider} from 'react-native-paper';
import {NavigationContainer} from '@react-navigation/native';

export const App = props => {
    return (
        <NavigationContainer>
            <Provider>
                <Navigator />
            </Provider>
        </NavigationContainer>
    );
};

我得到的错误是：

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
    at AppContainer (webpack://web_tester/./node_modules/react-native-web/dist/exports/AppRegistry/AppContainer.js?:22:24)

react-dom.development.js:14906 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (VM231 react-dom.development.js:14906)
    at Object.useContext (VM227 react.development.js:1504)
    at eval (VM252 index.js:83)
    at renderWithHooks (VM231 react-dom.development.js:14985)
    at updateForwardRef (VM231 react-dom.development.js:17044)
    at beginWork (VM231 react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (VM231 react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (VM231 react-dom.development.js:3994)
    at invokeGuardedCallback (VM231 react-dom.development.js:4056)
    at beginWork$1 (VM231 react-dom.development.js:23959)

我创建了一个包含错误的简单 git repository。请看一下。

任何其他方面的见解都会有所帮助。并提前致谢。

解决方法

尝试将 react-native-paper 提供程序放在外面。我的应用使用以下代码使用 react-native 和 react-native-web 工作正常。

我已经通过 Expo which is the recommended way 设置了 react-native-web：引用自 react-native-web 文档：“通常建议您使用 Expo。”

<PaperProvider theme={theme} settings={settings}>
  <NavigationContainer>
    <RootStackScreens />
  </NavigationContainer>
</PaperProvider>