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

Posted 2023-03-07

【中文标题】反应本机代码内联​​工作，但在导入时不起作用

【英文标题】：react native code works inline but not when imported

【发布时间】：2020-04-10 02:29:32

【问题描述】：

以下代码在 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
            </>
        )
    

这是常量文件夹中的 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',
  
;

如何让导入工作？

【参考方案1】：

尝试：

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

【讨论】：

谢谢，试过了，但我得到了同样的错误信息。我已更新问题以包含错误消息。

我包含了错误消息TypeError: undefined is not an object (evaluating '_constants.argonTheme.COLORS').

可以尝试直接从/constants/Theme.js导入

它直接从 Theme.js 工作，但我试图让它从 index.js 工作

【参考方案2】：

试试这个

//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
        </>
    )