Question

在我的本机应用程序中，我将一个函数从另一个文件导入到我的组件中。问题是，在加载组件后导入此函数。我的组件代码如下所示：

// Navigation imports
import { tabBarNavigationOptions } from '../../navigation';

console.log(tabBarNavigationOptions); // point1

class TestUI extends React.Component {
  static navigationOptions = tabBarNavigationOptions({ // point2
    tabBarLabel: 'Home',
    iconName: 'home'
  })

  componentDidMount() { // Also works in componentWillMount
    console.log(tabBarNavigationOptions); // point3
  }

我正在尝试导入tabBarNavigationOptions。我需要在point2使用它。问题是，在pint1和point2它返回undefined。但是在point3（组件加载后）它返回正确的值。

navigation.js看起来像这样：

import React from 'react';
import styled from 'styled-components/native';

import IconManager from 'IconManager';


// Tab Bar navigation options
const TabBarIcon = styled(IconManager)`
  color: #fff;
  font-size: 25px;
`;

const tabBarNavigationOptions = ({ tabBarLabel, iconName }) => (
  {
    tabBarLabel,
    tabBarIcon: () => (
      <TabBarIcon iconName={iconName} />
    )
  }
);

export {
  tabBarNavigationOptions
};

知道为什么会这样吗？

更新在同一个navigation.js文件中，我创建了一个堆栈导航器并将其导出。当我删除它，它工作正常，值在point1加载。知道为什么会这样吗？

Js导入仅在文件末尾执行。首先返回undefined

0 个答案: