如何在 react-native 上一起导出这两个变量

Question

我想为可以在整个应用程序上使用的主要颜色创建 2 个变量。这是代码：

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

const primary = '#27bcb5';
const secondary = '#ffffff;

如何将这 2 个变量一起导出以便在应用程序组件上使用？

解决方案的问题是：

import  {DefaultStyle}  from './variables';

const screenHeight = Dimensions.get("window").height;

const styles = {
  wrapper: {},
  slide1: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: primary,

它说找不到变量 primary

Answer 1

您可以使用以下方式导出它们：

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

const primary = '#27bcb5';
const secondary = '#ffffff';

export const DefaultStyle = {
    primary,
    secondary,
}

因此您可以将它们用作：

import { DefaultStyle } from './default-variables';
console.log(DefaultStyle.primary);
console.log(DefaultStyle.secondary);

Answer 2

您可以进行命名导出。例如。 :

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

const primary = '#27bcb5';
const secondary = '#ffffff';

export { primary, secondary };

之后，您可以通过以下方式导入样式：

import { primary, secondary } from 'YOUR_FILE_PATH'

Answer 3

我喜欢做一些更好的事情，定义一个全局文件，您可以在其中保存 Moment() 时间、设备测量等。

global.js

const global = {
  PRIMARY: '#27bcb5',
  SECONDARY: '#ffffff,
  DEVICE_MEASURES:{
     WIDTH: Dimensions.get("window").width,
     HEIGHT: Dimensions.get("window").height;
  },
  ...
}

export default global

然后在您的代码中：

import GLOBAL from '(directory)/global'

<View style={{ width: GLOBAL.DEVICE_MEASURES.WIDTH }}>
  <Text style={{ color: GLOBAL.PRIMARY }}>
    sup
  </Text>
</View>

最好有一个全局文件，您可以在其中存储所有应用程序的配置。

Answer 4

 // Declarations of colors variables     
  const Maincolor ="#333640"
       const Backgroundcolor = "#FFFFFF"
       const Gridcolor = "#A7A9AB" 
        const colors =  // Made to be bind in one because only one export is possiable 
   {
        Maincolor,
        Backgroundcolor,
        Gridcolor,
    }

    export default  colors; // exporting as default

// 在你的主代码中你必须包含

import colors from 'path_of_the_file'
// then in styles use 

style ={{backgroundColor:color.Maincolor}} // example how to use

如何在 react-native 上一起导出这两个变量

How can I export these 2 variables together on react-native

react-native

react-native-android

native-base

react-native-ios