React Native跨JS文件访问const变量出现undefined问题

嘿，这个问题我之前也踩过坑，一眼就找到问题根源啦！

问题原因 #

你在模块导出和导入的语法上不匹配：

• 在Abc.js里，你用的是默认导出：export default abc，整个模块只有这一个默认导出项。
• 但在App.js里，你却用了命名导入的语法：import { abc } from "./Abc";，这种语法是用来导入模块里的命名导出项的，和默认导出不兼容，所以才会拿到undefined。

解决方法 #

有两种可选的修正方式，选哪种都可以，看你的编码习惯：

方法一：修改App.js的导入语法（推荐，适配现有导出方式） #

把App.js里的导入代码改成默认导入的形式，去掉花括号：

import abc from "./Abc";

这样就能正确获取到Abc.js里定义的abc变量了。

方法二：修改Abc.js的导出语法为命名导出 #

如果你更习惯用命名导入的写法，可以把Abc.js的导出改成命名导出：

import { Platform } from 'react-native';
export const abc = Platform.select({ ios: [ 'com.abc', 'com.xyz' ], android: [ 'com.pqr', 'com.lmn' ] });

这样App.js里原来的import { abc } from "./Abc";就能正常工作了。

小提醒 #

另外注意你贴的App.js代码里，const instructions那一行好像没有写完（缺少闭合的大括号和分号），虽然这不是导致当前undefined的原因，但补全语法能避免后续出现其他奇怪的错误哦～

内容的提问来源于stack exchange，提问作者Pitty