错误:元素类型无效:应为字符串-在使用NativeBaseProvider后获取此错误

Question

我将原生基库从2.13.14升级到3.0.3，并将我的App.js内容包装在NativeBaseProvider中。下面是我在执行此操作后得到的错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

--

我的代码：

import React, {useEffect} from 'react';
import {I18nManager, ActivityIndicator} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {NativeBaseProvider, Container} from 'native-base';

import TrackPlayer from 'react-native-track-player';
import {PlayerContextProvider} from './contexts/PlayerContext';
import MainStackNavigator from './Navigators/MainStackNavigator';

const App = () => {
  const [isReady, setIsReady] = React.useState(false);

  useEffect(() => {
    TrackPlayer.setupPlayer().then(() => {
      console.log('player is setup');

      TrackPlayer.updateOptions({
        capabilities: [
          TrackPlayer.CAPABILITY_PLAY,
          TrackPlayer.CAPABILITY_PAUSE,
          TrackPlayer.CAPABILITY_STOP,
          TrackPlayer.CAPABILITY_JUMP_BACKWARD,
          TrackPlayer.CAPABILITY_JUMP_FORWARD,
        ],
        jumpInterval: 30,
      });
      setIsReady(true);
    });
  }, []);
  return (
    <NativeBaseProvider>
      <Container>
        {isReady ? (
          <PlayerContextProvider>
            <NavigationContainer>
              <MainStackNavigator />
            </NavigationContainer>
          </PlayerContextProvider>
        ) : (
          <Container>
            <ActivityIndicator />
          </Container>
        )}
      </Container>
    </NativeBaseProvider>
  );
};

I18nManager.forceRTL(true);

export default App;

Answer 1

我确实找到了这个问题的根本原因(在我的例子中)。方法是沿着导航器结构(在你的例子中从MainStackNavigator开始)，用https://docs.nativebase.io/setup-provider中的示例代码替换呈现的组件，直到它崩溃：

function Test() {
  return (
    <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
      <Text>Open up App.js to start working on your app!</Text>
    </Box>
  )
}

在我的例子中，它将我带到一个组件，该组件使用了来自v2的已弃用的native-base元素。遗憾的是，没有好的弃用指南或迁移指南来告诉您如何从v2升级到v3。

因此，遵循这种方法可能会导致这种情况(错误消息并不是真正有帮助的)。注意以下不推荐使用的组件或函数，并按如下方式替换它们：

use

• Header docs.nativebase.io/3.0.0/migration/Header
• Body -> use Box or Container (not documented)
• getTheme docs.nativebase.io/setup-provider#add-custom-theme-optional
• StyleProvider docs.nativebase.io/setup-provider

use Center or remove (not documented)

• getTheme -> use Box or Container (not documented)

• getThemedocs.nativebase.io/setup-provider#add-custom-theme-optional

• StyleProvider -> use Centeror remove (not documented)

• getTheme -> use extendTheme Center -> use NativeBaseProvider

这是我到目前为止不推荐使用的组件列表。此外，还提供了一些更新指南

• 图标docs.nativebase.io/3.0.0/migration/Icon
• Button docs.nativebase.io/3.0.0/migration/Button

在这个索引页面https://docs.nativebase.io/3.0.0/migration/上可以找到更多信息

我希望它能帮助你解决这个问题。

Answer 2

尝试在应用程序初始化的useEffect中移动forceRTL方法。

像这样：

useEffect(() => {
    I18nManager.forceRTL(true);    // here..
    TrackPlayer.setupPlayer().then(() => {

也许它会对你有所帮助。