Javascript 导出的常量在样式表中不起作用

在项目中的一个组件中，我导出一个常量整数，然后将其用作样式表中的高度值。在一个特殊的情况下，它不起作用，我不知道为什么。我提取了尽可能少的代码来复制它

在

TopBar.js

中，我导出

NAVBAR\u HEIGHT

并将其导入

Home.js

和

MyModal.js

。当我在StyeSheet中将其用作高度值时，它在

Home.js

中正常工作，但在

MyModal.js

中不起作用。但是，如果我用硬编码的int值替换

NAVBAR\u HEIGHT

，它就可以工作。如果我使用NAVBAR_HEIGHT inline而不是创建样式表并传递styles.topbar对象，它也可以工作

（我想为这个制作一个rnplay，但看起来它无法制作多个文件，因此，我无法复制它。）

这是代码，抱歉让它太长了。我也把它推到了

Home.js（根组件）

从“React”导入React；
进口{
视图、样式表、TouchableHighlight
}从“反应本机”；
从“/TopBar”导入TopBar，{NAVBAR_HEIGHT}；
导出默认类Home扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={showmodel:false}；
}
render（）{
返回(
);
}
toggleModal=（）=>{
this.setState（{showmodel:！this.state.showmodel}）；
}
}
const styles=StyleSheet.create({
视图：{
高度：导航栏高度，
背景颜色：“蓝色”，
}
});

MyModal.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Modal,
  Text,
} from 'react-native';

import { NAVBAR_HEIGHT } from './TopBar';

export default class MyModal extends Component {
  render() {
    return (
      <Modal animationType={'slide'}
        visible={this.props.visible}
        style={styles.container}
        onRequestClose={this.props.onClose}>
        <View style={styles.topbar}>
          <Text style={styles.text}>{NAVBAR_HEIGHT}</Text>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  topbar: {
    backgroundColor: 'red',
    height: NAVBAR_HEIGHT,
  },
  text: {
    fontSize: 20
  }
});

import React，{Component}来自'React'；
进口{
样式表，
看法
情态动词
文本，
}从“反应本机”；
从“/TopBar”导入{NAVBAR_HEIGHT}；
导出默认类MyModal扩展组件{
render（）{
返回(
{NAVBAR_HEIGHT}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
顶栏：{
背景颜色：“红色”，
高度：导航栏高度，
},
正文：{
尺寸：20
}
});

TopBar.js

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Platform,
    Text,
} from 'react-native';

import MyModal from './MyModal';

export const NAVBAR_HEIGHT = Platform.OS === 'ios' ? 200 : 100;

export default class TopBar extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>TEST</Text>
                <MyModal visible={this.props.showModal}
                    onClose={this.props.onClose} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'green',
    },
});

import React，{Component}来自'React'；
进口{
看法
样式表，
平台，
文本，
}从“反应本机”；
从“/MyModal”导入MyModal；
导出常量导航条高度=Platform.OS=='ios'？200 : 100;
导出默认类TopBar扩展组件{
render（）{
返回(
试验
);
}
}
const styles=StyleSheet.create({
容器：{
背景颜色：“绿色”，
},
});

---

我可能犯了一些愚蠢的错误，但我在这件事上花了太多的时间，我仍然不知所措。帮助。

模块

TopBar.js

和

MyModal.js

具有循环依赖关系：TopBar导入MyModal，MyModal导入TopBar。因为模块解析是同步的，所以导入的值是未定义的

将公共依赖项提取到它自己的模块中，并从TopBar和MyModal引用它

这是一个简单的复制品：

a.js

import {b} from './b';
export const a = 'a';

console.log('A sees B as', b);

import {a} from './a';
export const b = 'b';

console.log('B sees A as', a);

import {a} from './a';

b.js

import {b} from './b';
export const a = 'a';

console.log('A sees B as', b);

import {a} from './a';
export const b = 'b';

console.log('B sees A as', a);

import {a} from './a';

main.js

import {b} from './b';
export const a = 'a';

console.log('A sees B as', b);

import {a} from './a';
export const b = 'b';

console.log('B sees A as', a);

import {a} from './a';

产出：

B sees A as undefined
A sees B as b

---

啊！这完全有道理。非常感谢D