错误：useTheme：`theme` 未定义。似乎您忘记将您的应用程序包装在 `<NativeBaseProvider />` 中

Question

错误：useTheme：theme 未定义。好像你忘了把你的 应用在<NativeBaseProvider />

此错误位于： 在 ForwardRef（容器）中 在 ForwardRef(Container) (在 ProductContainer.js:166) 在 ProductContainer 中（在 SceneView.tsx:122） 在静态容器中 在 StaticContainer 中（在 SceneView.tsx:115） 在 EnsureSingleNavigator 中（在 SceneView.tsx:114） 在 SceneView 中（在 useDescriptors.tsx:153） 在 RCTView 中（在 View.js:34） 在视图中（在 CardContainer.tsx:245） 在 RCTView 中（在 View.js:34） 在视图中（在 CardContainer.tsx:244） 在 RCTView 中（在 View.js:34） 在视图中（在 CardSheet.tsx:33） 在 ForwardRef(CardSheet) 中（在 Card.tsx:573） 在 RCTView 中（在 View.js:34） 在视图中（在 createAnimatedComponent.js:165 处） 在 AnimatedComponent 中（在 createAnimatedComponent.js:215 处） 在 ForwardRef(AnimatedComponentWrapper) 中（在 Card.tsx:555） 在 PanGestureHandler (在 GestureHandlerNative.tsx:13) 在 PanGestureHandler 中（在 Card.tsx:549） 在 RCTView 中（在 View.js:34） 在视图中（在 createAnimatedComponent.js:165 处） 在 AnimatedComponent 中（在 createAnimatedComponent.js:215 处） 在 ForwardRef(AnimatedComponentWrapper) 中（在 Card.tsx:544） 在 RCTView 中（在 View.js:34） 在视图中（在 Card.tsx:538） 在卡片中（在 CardContainer.tsx:206） 在 CardContainer 中（在 CardStack.tsx:623） 在 RNSScreen 中（在 createAnimatedComponent.js:165 处） 在 AnimatedComponent 中（在 createAnimatedComponent.js:215 处） 在 ForwardRef(AnimatedComponentWrapper) (在 src/index.native.tsx:120) 在屏幕中（在 Screens.tsx:74） 在 MaybeScreen (在 CardStack.tsx:616) 在 RNSScreenContainer 中（位于 src/index.native.tsx:145） 在 ScreenContainer 中（在 Screens.tsx:50） 在 MaybeScreenContainer 中（在 CardStack.tsx:498） 在 CardStack 中（在 StackView.tsx:462） 在键盘管理器中（在 StackView.tsx:458） 在 SafeAreaProviderCompat 中（在 StackView.tsx:455） 在 GestureHandlerRootView 中（在 GestureHandlerRootView.android.tsx:26） 在 GestureHandlerRootView 中（在 StackView.tsx:454） 在 StackView 中（在 createStackNavigator.tsx:87 处） 在 StackNavigator 中（在 HomeNavigator.js:11） 在 MyStack 中（在 HomeNavigator.js:31） 在 HomeNavigator 中（在 SceneView.tsx:122） 在静态容器中 在 StaticContainer 中（在 SceneView.tsx:115） 在 EnsureSingleNavigator 中（在 SceneView.tsx:114） 在 SceneView 中（在 useDescriptors.tsx:153） 在 RCTView 中（在 View.js:34） 在视图中（在 BottomTabView.tsx:55） 在 SceneContent 中（在 BottomTabView.tsx:172） 在 RNSScreen 中（在 createAnimatedComponent.js:165 处） 在 AnimatedComponent 中（在 createAnimatedComponent.js:215 处） 在 ForwardRef(AnimatedComponentWrapper) (在 src/index.native.tsx:120) 在屏幕中（在 ResourceSavingScene.tsx:30） 在 ResourceSavingScene 中（在 BottomTabView.tsx:166） 在 RNSScreenContainer 中（位于 src/index.native.tsx:145） 在 ScreenContainer 中（位于 BottomTabView.tsx:146） 在 RNCSafeAreaProvider 中（在 SafeAreaContext.tsx:76） 在 SafeAreaProvider (在 SafeAreaProviderCompat.tsx:42) 在 SafeAreaProviderCompat 中（在 BottomTabView.tsx:145） 在 BottomTabView（在 createBottomTabNavigator.tsx:45 处） 在 BottomTabNavigator（在 Main.js:21） 在主要（在 App.js:28） 在 EnsureSingleNavigator 中（在 BaseNavigationContainer.tsx:409） 在 ForwardRef(BaseNavigationContainer) 中（在 NavigationContainer.tsx:91） 在 ThemeProvider 中（在 NavigationContainer.tsx:90） 在 ForwardRef(NavigationContainer) (在 App.js:26) 在提供者中（在 App.js:25） 在 Auth (在 App.js:24) 在 App 中（由 ExpoRoot 创建） 在 ExpoRoot (在 renderApplication.js:45) 在 RCTView 中（在 View.js:34） 在视图中（在 AppContainer.js:106） 在 RCTView 中（在 View.js:34） 在视图中（在 AppContainer.js:132） 在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 的 AppContainer（在 renderApplication.js:39）中 报告异常在 node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 在句柄异常中 node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in 处理错误在 node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 在 ErrorUtils.setGlobalHandler$argument_0 at [native code]:null in flushedQueue at [native code]:null in invokeCallbackAndReturnFlushedQueue 错误：ENOENT：没有这样的文件或 目录，看 '/home/user/sj/front/node_modules/nan/doc' 在 FSWatcher。 （内部/fs/watchers.js:218:26） 在 Object.watch (fs.js:1582:34) 在 NodeWatcher.watchdir (/home/user/sj/front/node_modules/sane/src/node_watcher.js:159:22) 在 NodeWatcher。 (/home/user/sj/front/node_modules/sane/src/node_watcher.js:295:18) 在 FSReqCallback.oncomplete (fs.js:193:5)

https://github.com/SHARUNJOSEPH/front-server

Answer 1

尝试将 native-base 降级到 2.15.2，对我有用。您可能需要使用 npm install native-base@2.15.2 --force

Answer 2

经过一天的努力，我找到了一个解决方案来开玩笑地测试它。 我必须添加一个包装器。

你可以直接用 NativeBaseProvider 包裹，别忘了 prop initialWindowMetrics

例子：

const wrapper = ({children}: any) => (
  <NativeBaseProvider
    initialWindowMetrics={{
      frame: {x: 0, y: 0, width: 0, height: 0},
      insets: {top: 0, left: 0, right: 0, bottom: 0},
    }}>
    {children}
  </NativeBaseProvider>
);
 test('renders with App', () => {
    const homeScreen = render(
      <HomeScreen/>,
      {wrapper},
    ).toJSON();
    expect(homeScreen).toMatchSnapshot();
  });

Answer 3

在投资了我的 2 天之后。我得到了降级本机基础的解决方案。只需运行这一行。

npm install native-base@2.15.2 --force

Answer 4

import { NativeBaseProvider } from 'native-base';

export default function App() {
    return (
        <NativeBaseProvider>
            <Auth>
                <Provider store={store}>
                    <NavigationContainer>
                        <Header />
                        <Main />
                        <Toast ref={(ref) => Toast.setRef(ref)} />
                    </NavigationContainer>
                </Provider>
            </Auth>
        </NativeBaseProvider>
    );
}

Answer 5

无需降级。我正在使用最新版本的 Nativebase 3.2.1。只需要将 NavigationContainer 创建为单独的组件即可。

    import React from 'react';
    import { NavigationContainer } from '@react-navigation/native';
    import { NativeBaseProvider, useColorModeValue, useToken } from 'native-base';
    import RootStackNavigator from './RootStackNavigator'; // Change your root navigator
    
    const MyNavigationContainer = () => {
      const [lightBg, darkBg] = useToken(
        'colors',
        ['coolGray.50', 'blueGray.900'],
        'blueGray.900',
      );
      const bgColor = useColorModeValue(lightBg, darkBg);
      return (
        <NavigationContainer
          theme={{
            colors: { background: bgColor },
          }}>
            <RootStackNavigator />
        </NavigationContainer>
      );
    };
    
    const App = () => {
      return (
        <NativeBaseProvider>
          <MyNavigationContainer />
        </NativeBaseProvider>
      );
    };
    
    export default App;