React Native报错：RecentExpenses组件回调需函数，收到undefined求排查

问题描述 #

开发一款带底部导航的费用跟踪应用，包含三个页面：Manage Expenses、All Expenses、Recent Expense。出现以下错误：

Invariant Violation: View config getter callback for component RecentExpenses must be a function (received undefined)

已确认文件导入路径正确，需排查问题根源。

相关代码 #

App.js #

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import ManageExpense from "../ExpenseTracker/screens/ManageExpense";
import AllExpenses from "../ExpenseTracker/screens/AllExpenses";
import RecentExpenses from "../ExpenseTracker/screens/RecentExpenses";

const Stack = createNativeStackNavigator();
const BottomTabs = createBottomTabNavigator();

function ExpensesOverview() {
  return (
    <BottomTabs.Navigator>
      <BottomTabs.Screen name="RecentExpenses" component={"RecentExpenses"} />
      <BottomTabs.Screen name="AllExpenses" component={"AllExpenses"} />
    </BottomTabs.Navigator>
  );
}
export default function App() {
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="ExpensesOverview" component={ExpensesOverview}/>
          <Stack.Screen name="ManageExpense" component={ManageExpense} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

AllExpenses.js #

import {Text} from 'react-native';
function AllExpenses(){
    return <Text>All Expense Screen</Text>;
}
export default AllExpenses;

RecentExpenses.js #

import {Text} from 'react-native';
function RecentExpenses() {
    return <Text>Recent Expenses Screen</Text>;
}
export default RecentExpenses;

ManageExpense.js #

import {Text} from 'react-native'
function ManageExpense(){
    return <Text>Manage Expense Screen</Text>;
}
export default ManageExpense;

问题根源与修复 #

错误出在ExpensesOverview组件的底部导航配置中：BottomTabs.Screen的component属性被传入了字符串值（"RecentExpenses"、"AllExpenses"），但React Navigation要求这里必须传入实际的组件对象，而非组件名称的字符串。

修改后的ExpensesOverview代码如下：

function ExpensesOverview() {
  return (
    <BottomTabs.Navigator>
      <BottomTabs.Screen name="RecentExpenses" component={RecentExpenses} />
      <BottomTabs.Screen name="AllExpenses" component={AllExpenses} />
    </BottomTabs.Navigator>
  );
}

只需去掉component属性值的引号，直接使用导入的组件变量即可解决该错误。

内容的提问来源于stack exchange，提问作者Rohan Patil