Question

目前我正在导出一个组件

  export default function ChooseNamespace() {


  return (
    <View>
      <Text>HELLO</Text>
    </View>
  );
}

并在此处导入：

import ChooseNamespace from "./screens/ChooseNamespace";

   const AppDrawerNavigator = () => {
    console.log(storeState.userNamespace);
    if (storeState.userNamespace === null) {
      return <ChooseNamespace />;
    } else {
      return (
        <AppDrawer.Navigator
          drawerContent={(props) => <AppDrawerContent {...props} />}
          drawerContentOptions={{
            activeTintColor: "blue",
            labelStyle: {
              color: "white",
            },
          }}
        >
          <AppDrawer.Screen
            name="Chat"
            children={(props) => <ChatScreen name="Blindly Chat" {...props} />}
          />
          <AppDrawer.Screen
            name="Profile"
            children={(props) => <ProfileScreen name="Profile" {...props} />}
          />
          <AppDrawer.Screen
            name="DirectMessages"
            children={(props) => <DMScreen {...props} />}
          />
          <AppDrawer.Screen
            name="Threads"
            children={(props) => <ThreadsScreen {...props} />}
          />
          <AppDrawer.Screen
            name="Settings"
            children={(props) => <SettingsScreen {...props} />}
          />
          <AppDrawer.Screen
            name="Support"
            children={(props) => <SupportScreen {...props} />}
          />
        </AppDrawer.Navigator>
      );
    }
  };

然后抛出错误

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

检查 ChooseNamespace 的渲染方法。

有人可以尝试在这里解释一下这个问题吗？我找不到它。

Answer 1

const ChooseNamespace =()=> {


  return (
    <View>
      <Text>HELLO</Text>
    </View>
  );
}
export default ChooseNamespace

试试这个代码。 ES6 不允许 export default 常量。您必须先声明常量，然后再导出它。或者如果想要有一个功能，那么这样做：

function ChooseNamespace() {


  return (
    <View>
      <Text>HELLO</Text>
    </View>
  );
}

export default ChooseNamespace;

Answer 2

你能试试这个吗。

  return (
           <>
             {
              storeState.userNamespace === null? 
               <ChooseNamespace/>:
               <YourDrawerView/>
                        
            }
         </>  
    
       );

在本机反应中正确导入组件？

2 个答案: