Javascript React本机JSX导出导入标识符

当我

将
常量导出到另一个js文件时，我遇到了一个奇怪的问题。这是我的问题：

假设我有两个文件名为
index.js
和
router.js

// in router.js
export const stackNav = StackNavigator({
Home: {
    screen: Me,
    navigationOptions: {
        title: 'Welcome'
    }
}
});


// in index.js
import { stackNav } from './router';

class MainApp extends Component {
    render() {
        return (
            <stackNav />
       );
    }
}

export default MainApp;

//在router.js中
export const stackNav=StackNavigator({
主页：{
屏幕：我，
导航选项：{
标题：“欢迎”
}
}
});
//在index.js中
从“./router”导入{stackNav}；
类MainApp扩展组件{
render（）{
返回(
);
}
}
导出默认MainApp；

当我使用上述代码运行时，我无法运行我的应用程序，它会显示错误消息并显示红色屏幕：
需要一个组件类，得到[object object]。

但是，如果我将所有
stackNav
更改为
stackNav
，我可以成功运行我的应用程序。因此，我不知道名称/标识符的大小写为什么重要？
因为React/ReactNative组件名称必须以大写字母开头，表示Official

用户定义的组件必须大写

当一个元素类型以小写字母开头时，它引用一个内置组件，如or，并导致传递给React.createElement的字符串'div'或'span'

以大写字母开头的类型，如compile to React.createElement（Foo），并与JavaScript文件中定义或导入的组件相对应

我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在JSX中使用它之前将其分配给大写变量

以下是文档中的代码片段

import React from 'react';

// Wrong! This is a component and should have been capitalized:
function hello(props) {
// Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}

从“React”导入React；
//错了！这是一个组成部分，应资本化：
功能你好（道具）{
//正确！此使用是合法的，因为div是有效的HTML标记：
返回Hello{props.toWhat}；
}
函数HelloWorld（）{
//错误！React认为是HTML标记，因为它没有大写：
返回；
}
这将回答您的问题@NeelGala您的评论是对我的问题的正确回答，我的问题与您提供的线程重复。