组件异常：组件的视图配置 getter 回调必须是函数（收到“未定义”）

Posted 2023-02-23

【中文标题】组件异常：组件的视图配置 getter 回调必须是函数（收到“未定义”）

【英文标题】：Component Exception: View config getter callback for component must be a function (received 'undefined')

【发布时间】：2021-06-27 16:19:02

【问题描述】：

我正在做基本的反应原生导航示例，但是当我尝试使其工作时出现错误！

这里是导航模块：

// In App.js in a new project

import * as React from 'react';
import  View, Text  from 'react-native';
import  NavigationContainer  from '@react-navigation/native';
import  createStackNavigator  from '@react-navigation/stack';
import  LoginScreen  from "./Components/Login/LoginScreen.js";
import "./Components/Main/MainScreen.js";


const Stack = createStackNavigator();

function App() 
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component="LoginScreen" />
        <Stack.Screen name="Main" component="MainScreen" />
      </Stack.Navigator>
    </NavigationContainer>
  );


export default App;

这里是 LoginScreen.js：

import  StatusBar  from 'expo-status-bar';
import React from 'react';
import  StyleSheet, Text, View  from 'react-native';

export default function App() 
  return (
    <View style=styles.container>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );


const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  ,
);

我得到的错误是：组件异常：组件'LoginScreen'的视图配置getter回调必须是一个函数（收到'未定义'）

【参考方案1】：

答案：在将组件传递给屏幕的component 属性时去掉引号。

---

文档指定component 属性如下：

为屏幕渲染的 React 组件

https://reactnavigation.org/docs/screen/#component

所以它不起作用，因为您传递的是 string 而不是反应组件。

---

而不是这个：

function App() 
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component="LoginScreen" />
        <Stack.Screen name="Main" component="MainScreen" />
      </Stack.Navigator>
    </NavigationContainer>
  );

这样做：

function App() 
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component=LoginScreen />
        <Stack.Screen name="Main" component=MainScreen />
      </Stack.Navigator>
    </NavigationContainer>
  );