Question

在Expo.io驱动的React Native应用程序中存储常见变量的首选方法是什么？我尝试创建以下内容但由于某种原因Vars.colors.primary返回错误，指出undefined is not an object。我缺少什么/我应该怎么做？

应用程序/ VARS / Vars.js

var primaryColor = '#0b457e';
let tabIconDefault = '#000000';
let tabIconSelected = primaryColor;
let font_normal = 'OpenSans-Regular';
let font_bold = 'OpenSans-Bold';
let radius = 5;
let iconSize = 24;

export default {
    colors: {
        white: '#FFFFFF',
        black: '#000000',
        primary: primaryColor,
    },
    iconSize: '24'
}

AppNavigator.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { createStackNavigator } from 'react-navigation'
import StartScreen from 'app/screens/StartScreen'
import * as Vars from 'app/vars/Vars'

export default class AppNavigator extends React.Component {
  render() {
    return (
      <AppStack />
    );
  }
}

const AppStack = createStackNavigator(
    {
        StartScreen: StartScreen
    },
    {
        initialRouteName: 'StartScreen',
        navigationOptions: {
            headerStyle: {
                backgroundColor: Vars.colors.white,
            },
            headerTintColor: Vars.colors.primary,
            headerTitleStyle: {
                fontWeight: 'bold',
            },
        },
    }
)

Answer 1

由于您正在执行export default，因此您不需要使用通配符语法。您可以使用以下声明导入。

import Vars from 'app/vars/Vars'

另一件要指出的事情;如果Vars.js是vars目录中的唯一文件，则可以将Vars.js更改为index.js，并使用以下语法获得更易读且更易于使用的版本。

import Vars from 'app/vars'

常见变量或如何在React本机应用程序中导出变量

1 个答案: