渲染Native Base组件时触发Element type is invalid报错如何解决

你遇到的报错是因为导入了NativeBase中不存在的组件导致渲染异常：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

NativeBase从3.0版本开始重构了组件体系，你代码中使用的Container、Header、Left、Body、Right、Title都是v2版本的旧组件，v3+版本已经完全移除了这些组件，所以导入后拿到的是undefined，渲染时就会触发类型校验失败的报错。另外你代码中使用了View组件，但没有在react-native的导入声明中引入，也会触发同类报错。

你可以选择以下任意一种方式解决问题：

方案1：降级使用NativeBase v2版本 #

如果你希望沿用现有代码的写法，可以直接将NativeBase降级到2.x的最终稳定版本：

1. 卸载当前版本的NativeBase

npm uninstall native-base
# 或者用yarn
yarn remove native-base

2. 安装v2版本的NativeBase

npm install native-base@2.15.2
# 或者用yarn
yarn add native-base@2.15.2

3. 补全react-native的View导入，修改导入语句：

import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, useWindowDimensions, View } from 'react-native';

4. 重启项目即可正常运行。

方案2：适配NativeBase v3+版本的新写法 #

如果你希望使用最新版本的NativeBase，可以按照新的组件规范修改代码，以下是修改后的参考代码：

import React, {useState} from 'react';
import type {Node} from 'react';
import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, useWindowDimensions, View } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
// 仅导入v3支持的组件
import { NativeBaseProvider, Box, HStack, Heading, Icon } from 'native-base';
// 如果使用Icon需要引入对应图标库，示例用Ionicons
import Ionicons from '@expo/vector-icons/Ionicons';

const App: () => Node = () => {
  const layout = useWindowDimensions();
  const FirstPage = () => (
    <View style={{flex: 1, backgroundColor: '#F0FFFF'}}></View>
  )
  const SecondPage = () => (
    <View style={{flex: 1, backgroundColor: '#FFFFFF'}}></View>
  )
  const renderScene = SceneMap({
    first: FirstPage,
    second: SecondPage,
  });

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'first', title: 'Game'},
    {key: 'second', title: 'Highscores'},
  ]);
  const indexChange = (index) => {
    setIndex(index);
    if (index === 1) {

    }
  } 
  return (
    <NativeBaseProvider>
      <Box flex={1}>
        {/* 用HStack替代原来的Header布局 */}
        <HStack bg="#00BFFF" px={4} py={3} alignItems="center" justifyContent="space-between">
          <Icon as={Ionicons} name="menu" color="white" size="lg" />
          <Heading color="white" size="lg">SPEEDGAME</Heading>
          {/* 右侧占位用空Box即可 */}
          <Box w={6} />
        </HStack>
      </Box>
    </NativeBaseProvider>
  );
};

修改完成后重启项目即可。

内容的提问来源于stack exchange，提问作者Howard Duong