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

【问题标题】：React native Paper Provider and React Navigation NavigationContainer Causing error in React Native WebReact Native Paper Provider 和 React Navigation NavigationContainer 在 React Native Web 中导致错误
【发布时间】：2021-07-29 08:20:26
【问题描述】：

我是 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，其中包含错误。请看一下。

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

【问题讨论】：

这不是错误，而是警告。尽管您收到了警告，但您的应用是否按预期运行？

标签： reactjs react-native react-navigation react-native-navigation react-native-paper

【解决方案1】：

尝试将 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>

【讨论】：