エクスポートされた定数はスタイルシートでは機能しません

Question

私のプロジェクトのコンポーネントの1つでは、定数をエクスポートしてStyleSheetの高さの値として使用します。 1つの特定のケースでは、それは動作していないと私は理由を把握することはできません。私はそれを再現するための最小限のコードを抽出しました。

TopBar.jsには、NAVBAR_HEIGHTをエクスポートし、Home.jsとMyModal.jsの両方にインポートします。 StyeSheetで高さの値として使用するとHome.jsで正しく機能しますが、MyModal.jsでは機能しません。しかし、もし私がNAVBAR_HEIGHTをハードコードされたint値に置き換えれば、それは機能します。また、スタイルシートを作成してstyles.topbarオブジェクトを渡す代わりに、NAVBAR_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', 
    }, 
}); 

私はいくつかの愚かな間違いを犯してかもしれないが、私は道を費やしていますこれにはあまりにも多くの時間と私はまだ無知です。助けて。

Answer 1

モジュールTopBar.jsおよびMyModal.jsは、循環依存性を持ちます。TopBarはMyModalをインポートし、MyModalはTopBarをインポートします。モジュールの解像度は同期式なので、インポートされる値はundefinedです。

共通の依存関係をモジュールに抽出し、TopBarとMyModalの両方から参照します。

は簡単な再現です：

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

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

b.js a.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