检查 `ExpoRootComponent` 的渲染方法答案

【问题标题】：Check the render method of `ExpoRootComponent`检查 `ExpoRootComponent` 的渲染方法
【发布时间】：2021-06-15 04:10:59
【问题描述】：

我正在尝试使用 react-native 导航。我安装了应用程序，一切正常。现在，当我尝试在 ios 和 web 中创建导航时，我遇到了 Expo：

警告：React.createElement：类型无效 - 应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

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

【问题讨论】：

标签： react-native expo react-navigation react-native-navigation

【解决方案1】：

改变

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

到

import Routes from './src/Routes';

你已经完成了默认导出，所以你应该像这样导入

在 App.js 中也可以这样做

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

【讨论】：