Question

在我的项目的一个组件中，我导出一个常量整数，然后在StyleSheet中将其用作高度值。在一个特定情况下，它不起作用，我无法弄清楚原因。我已经提取了最少的代码来重现它。

在TopBar.js中，我导出NAVBAR_HEIGHT并将其导入Home.js和MyModal.js。虽然当我在StyeSheet中将其用作高度值时它在Home.js中正常工作，但它在MyModal.js中无效。但是，如果我用硬编码的int值替换NAVBAR_HEIGHT，它就可以工作。如果我使用NAVBAR_HEIGHT内联而不是创建StyleSheet并传递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

导出的常量不在样式表中

1 个答案: