0

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

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

（我想为此制作一个 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',
    },
});

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

4

1 回答 1

1

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

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

这是一个简单的复制：

一个.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
于 2017-01-27T15:32:10.383 回答