检查 `ExpoRootComponent` 的渲染方法

Question

我正在尝试使用 react-native 导航。我安装了应用程序，一切正常。现在，当我尝试在 ios 和 web:

中创建导航时，Expo 遇到了这个问题

Warning: React.createElement: 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.

Check the render method of ExpoRoot.

注册根组件

  11 |   AppRegistry.registerComponent('main', () => withExpoRoot(component));
  12 |   if (Platform.OS === 'web') {
  13 |     const rootTag = document.getElementById('root') ?? document.getElementById('main');
> 14 |     AppRegistry.runApplication('main', { rootTag });
  15 |   }
  16 | }
  17 |

这是我的App.js

import { Routes } from './src/Routes';

export default Routes;

路线

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { View, Text } from 'react-native';

const Stack = createStackNavigator();



function Home() {
    return (
        <View>
            <Text>Some text!</Text>
        </View>
    )
}
function Routes() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name='Home' component={Home}/>
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default Routes;

I'm just following a tutorial here

如果我将其用作我的 App.js:

，该应用程序仍会运行

import {useEffect} from 'react';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import socket from './socektConfig';

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',
  },
});

Answer 1

改变

import { Routes } from './src/Routes';

到

import Routes from './src/Routes';

您已完成默认导出，因此您应该像这样导入

也在 App.js 中执行此操作

export default function App() {
  return (
    <Routes/>
  );
}

检查 `ExpoRootComponent` 的渲染方法

Check the render method of `ExpoRootComponent`

react-native

expo

react-navigation

react-native-navigation