反应本机代码内联​​工作，但导入时不起作用

Question

以下代码在react native 0.61.5中可以正常工作。

// userApplication/screens/UserScreen.js

import React, {Component} from 'react';
import { Button } from "./../components/arComponents";

class UserScreen extends React.Component {
    let COLORS = {
        INFO: '#11CDEF',
    }

    render{
        return (
            <>
                <Button style={{ backgroundColor: COLORS.INFO }} >Connect</Button>
            </>
        )
    }
}

但是，当尝试导入完全相同的对象时，出现错误：TypeError: undefined is not an object (evaluating '_constants.argonTheme.COLORS')。

我有以下内容：

// userApplication/screens/UserScreen.js

import React, {Component} from 'react';
import { Button } from "./../components/arComponents";
import { argonTheme } from "./../constants";  //This line changed from code above

class UserScreen extends React.Component {
    let COLORS = {
        INFO: '#11CDEF',
    }

    render{
        return (
            <>
                <Button style={{ backgroundColor: argonTheme.COLORS.INFO }} >Connect</Button>  //This line changed from code above
            </>
        )
    }
}

这是constants文件夹中的index.js文件：

//  userApplication/constants/index.js
import argonTheme from './Theme';
export {
  // articles,
  // Images, 
  argonTheme,
};

这是定义对象的地方：

//userApplication/constants/Theme.js
export default {
  COLORS: {
    //LABEL: '#FE2472',
    INFO: '#11CDEF',
  }
};

如何使导入工作？

Answer 1

尝试一下

//userApplication/constants/Theme.js
export const argonTheme = {
  COLOR : {
    //LABEL: '#FE2472',
    INFO: '#11CDEF',
  }
};

并在下面的导入中使用

// userApplication/screens/UserScreen.js

import React, {Component} from 'react';
import { Button } from "./../components/arComponents";
import { argonTheme } from "../constants/Theme.js";  //This line changed from code above

class UserScreen extends React.Component {

 render{
    return (
        <>
            <Button style={{ backgroundColor: argonTheme.COLORS.INFO }} >Connect</Button>  //This line changed from code above
        </>
    )
 }
}

Answer 2

尝试：

//  userApplication/constants/index.js
import argonTheme from './Theme';
module.exports = {
  // articles,
  // Images, 
  argonTheme,
};