Реагировать Нативные компоненты вызова в импорте js

Question

У меня есть import.js, и я нахожу путь всех модулей. Например. color.js и button.js распознаются в import.js. И затем я хочу назвать свой импорт оттуда в других компонентах. И я могу назвать импорт всех модулей в main.js. Но в button.js я не могу вызвать color.js Когда один из js-файлов импортируется в import.js, он не может вызывать js-файл в import.js. Кроме того, он дает эту ошибку:

1.undefined не является объектом (оценки '') COLOR.BUTTONDARK

2. [фатальным] [TID: com.facebook.react.RCTExceptionsManagerQueue] Необработанное JSИсключение: не определено не является объектом (оценка '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

Я думаю, что у вас есть циклическая зависимость. Где вам требуется что-то, что определено до того, как оно завершит импорт самих его определений.

1. main.js требует imports.js
2. imports.js требует XYZButton.js
3. XYZButton.js требует imports.js, который в данный момент не закончил загрузку своих зависимостей. Затем он вернет неопределенный объект, который даст вам вашу ошибку с константой COLOR.

Что вы на самом деле хотите сделать, это полностью отказаться от imports.js и просто потребовать относительные пути из ваших других файлов. Наличие файла imports.js не дает вам никакой пользы.