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

Question

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

在 TopBar.js 中，我导出 NAVBAR_HEIGHT 并在 Home.js 和 MyModal.js 中导入它。当我将它用作 StyeSheet 中的高度值时，它在 Home.js 中正常工作，但它在 MyModal.js 中不起作用。但是，如果我用硬编码的 int 值替换 NAVBAR_HEIGHT，它就可以工作。如果我使用 NAVBAR_HEIGHT 内联而不是创建样式表并传递 styles.topbar 对象，它也会起作用。

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

这是代码，很抱歉让它变长了。我也把它推到 git here.

Home.js（根组件）

import React from 'react';
import {
    View, StyleSheet, TouchableHighlight
} from 'react-native';

import TopBar, { NAVBAR_HEIGHT } from './TopBar';

export default class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = { showModal: false };
    }

    render() {
        return (
            <TouchableHighlight onPress={this.toggleModal}>
                <View style={styles.view}>
                    <TopBar showModal={this.state.showModal}
                        onClose={this.toggleModal} />
                </View>
            </TouchableHighlight>
        );
    }

    toggleModal = () => {
        this.setState({ showModal: !this.state.showModal });
    }
}

const styles = StyleSheet.create({
    view: {
        height: NAVBAR_HEIGHT,
        backgroundColor: 'blue',
    }
});

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
  }
});

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',
    },
});

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

Answer 1

模块TopBar.js和MyModal.js有循环依赖：TopBar导入MyModal，MyModal导入TopBar。因为模块解析是同步的，所以导入的值为undefined。

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

这是一个简单的复制：

a.js

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

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

b.js

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

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

main.js

import {a} from './a';

输出：

B sees A as undefined
A sees B as b

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

Exported Constant not working in stylesheet

javascript

react-native

react-native-android

react-native-ios