React Native 在 imports js 中调用组件

Question

我有一个 import.js，我正在其中写入所有模块的路径。例如。 color.js 和 button.js 在 import.js 中被识别。然后我想在其他组件中从那里调用我的导入。我可以在 main.js 中调用所有模块的导入。但是在 button.js 中，我不能调用 color.js 当在import.js中导入其中一个js文件时，无法调用import.js中的任何js文件。它还给出了这个错误：

1.undefined 不是对象（正在计算 'COLOR.BUTTONDARK'）

2.[致命][tid:com.facebook.react.RCTExceptionsManagerQueue] 未处理的 JS 异常：undefined 不是对象（评估 'COLOR.BUTTONDARK' )

3.[错误][tid:com.facebook.react.JavaScript] AppRegistry 模块不是 注册的可调用模块。

//import.js
module.exports = {
  BUTTON: require('./../components/XYZButton'),
  COLOR: require('./../styles/colors'),
};


//colors.js
module.exports = {
  BUTTONDARK: '#084C6E',
  TEXTLIGHT: '#FFFFFF'
  };


//xyzbutton.js
const COLOR = require('./../constants/imports');
class XYZButton extends React.Component {
  render() {
  return (
    <TouchableHighlight>
      <View style={{backgroundColor:COLOR.BUTTONDARK}}>
        <Text style={{color:COLOR.TEXTLIGHT}}>
          {'TEST'}
        </Text>
      </View>
    </TouchableHighlight>
  );
  }
}
module.exports = (XYZButton);


//main.js
const {BUTTON, COLOR} = require('./../../../../constants/imports');
class Main extends React.Component {
  render() {
    return (
    <View style={{backgroundColor:COLOR.BUTTONDARK}}>
      <BUTTON
        onPress = {() => {
          this._handleSelectModulPage()
        }}
        style = {{
        alignItems: 'center',
        justifyContent: 'center'
        }}
      />
    </View>
    );
  }
}
module.exports = (Main);

Answer 1

我认为你有循环依赖。在完成导入其定义本身之前，您需要定义的内容。

main.js 需要 imports.js
imports.js 需要 XYZButton.js
XYZButton.js 需要 imports.js，此时它还没有完成加载自己的依赖项。然后它会 return 一个未定义的对象，它给你你的 COLOR 常量错误。

您真正想要做的是完全废弃 imports.js，只需要其他文件的相对路径。拥有 imports.js 文件并不能真正给您带来任何好处。

React Native 在 imports js 中调用组件

React Native call components in imports js

import

components

module

path

react-native