Javascript 更改“的子文件”后热重新加载崩溃；文件夹导入"；

我的项目设置如下所示（将其用作MVCE）：

index.js

中的代码如下所示：

import CommonStyles from "./common.ts";
export { CommonStyles };

import { StyleSheet } from "react-native";

const CommonStyles = StyleSheet.create({
    example: {
        width: "50%",
        height: "50%",
        backgroundColor: "red"
    }
});
export default CommonStyles;

import React from "react";
import { View } from "react-native";
import { CommonStyles } from "./styles";

function App() {
    return (
        <View style={CommonStyles.example} />
    );
}

export default App;

common.ts

如下所示：

import CommonStyles from "./common.ts";
export { CommonStyles };

import { StyleSheet } from "react-native";

const CommonStyles = StyleSheet.create({
    example: {
        width: "50%",
        height: "50%",
        backgroundColor: "red"
    }
});
export default CommonStyles;

import React from "react";
import { View } from "react-native";
import { CommonStyles } from "./styles";

function App() {
    return (
        <View style={CommonStyles.example} />
    );
}

export default App;

从

app.tsx

i导入以下样式：

import CommonStyles from "./common.ts";
export { CommonStyles };

import { StyleSheet } from "react-native";

const CommonStyles = StyleSheet.create({
    example: {
        width: "50%",
        height: "50%",
        backgroundColor: "red"
    }
});
export default CommonStyles;

import React from "react";
import { View } from "react-native";
import { CommonStyles } from "./styles";

function App() {
    return (
        <View style={CommonStyles.example} />
    );
}

export default App;

我没有使用expo

---

另外，我不知道JS中的“文件夹导入”是什么意思，所以请随意编辑标题，谢谢

我升级了react native

0.61.0

版本，修复了这个bug。对于那些使用react native较低版本的用户，您可以尝试以下几种解决方法：

重命名导入 显然，重命名导入是一种解决方案：

import CS from "./common.ts";
const CommonStyles = CS;
export { CommonStyles };

启用松散模式 将此项添加到

.babelrc

或

babel.config.js

中也可以：

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
  ],
  plugins: [
    [
      '@babel/plugin-transform-modules-commonjs',
      {
        strictMode: false,
        allowTopLevelThis: true,
        loose: true,
      },
    ],
  ],
};