es6:导出后如何导入const？

Question

我为自己缺乏知识而道歉.我想在文件中导入一个const值.我在同一目录中有两个文件Home.js和styles.js.

Home.js

import React from 'react';
import styles from './styles';

const Home = (props) => {

    const HEADER_MAX_HEIGHT = 200;

}

export { HEADER_MAX_HEIGHT };
export default Home;

并在styles.js

import { StyleSheet } from 'react-native'
import { HEADER_MAX_HEIGHT } from './Home';

export default StyleSheet.create({
    header: {
        height: HEADER_MAX_HEIGHT
    }
});

但我得到这个错误

找不到变量:HEADER_MAX_HEIGHT

我怎样才能在styles.js中访问该变量？

Answer 1

您应该以完全不同的方式构建代码.

一个好的规则是将所有常量保存在一个单独的文件中,远离所有视图.

尝试为所有App Constants创建一个文件. Constants.js是个不错的选择.

然后把常量放在这样:

const Constants = {
  HEADER_MAX_HEIGHT: 200,
  OTHER_THINGS: 'whatever'
}
export default Constants

然后,您可以在任何需要的地方导入常量.

import Constants from '../Folder/Constants'

并使用这样的

const x = Constants.HEADER_MAX_HEIGHT

Answer 2

尝试:

Home.js

import React from 'react';
import styles from './styles';

export const HEADER_MAX_HEIGHT = 200;

const Home = props => <h1>Home</h1>;

export default Home;

styles.js

import { StyleSheet } from 'react-native';
import { HEADER_MAX_HEIGHT } from './Home';

export default StyleSheet.create({
  header: {
    height: HEADER_MAX_HEIGHT,
  },
});

您HEADER_MAX_HEIGHT需要在Home.js文件中但在HomeComponent 之外.你可以在这里阅读它:Javascript范围