React native 如何在react native上同时导出这两个变量

我想做两个变量的主要颜色，可以在整个应用程序上使用。代码如下：

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet}；
常量primary='#27bcb5'；
const secondary='#ffffff；

如何将这两个变量一起导出以用于应用程序组件

解决方案的问题是：

从'./variables'导入{DefaultStyle}；
const screenHeight=尺寸。获取（“窗口”）。高度；
常量样式={
包装：{}，
幻灯片1：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”，
背景颜色：原色，

---

它说找不到变量primary

您可以使用以下工具导出它们：

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet}；
常量primary='#27bcb5'；
const secondary='#ffffff'；
导出常量DefaultStyle={
主要的，重要的
次要的
}

因此，您可以将其用作：

从“/default variables”导入{DefaultStyle}；
log（DefaultStyle.primary）；
log（DefaultStyle.secondary）；

您可以通过以下方式导出它们：

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet}；
常量primary='#27bcb5'；
const secondary='#ffffff'；
导出常量DefaultStyle={
主要的，重要的
次要的
}

因此，您可以将其用作：

从“/default variables”导入{DefaultStyle}；
log（DefaultStyle.primary）；
log（DefaultStyle.secondary）；

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

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' 

---

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

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' 

---

我喜欢做一些更好的事情，定义一个全局文件，在其中可以保存像矩（）时间、设备度量等

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>

import GLOBAL from'（目录）/GLOBAL'
啜饮

---

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

我想做些更好的事情，定义一个全局文件，可以在其中保存瞬间（）时间、设备度量等

 // 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 

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>

import GLOBAL from'（目录）/GLOBAL'
啜饮

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

 // 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 

//在你的主代码中，你必须包括

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

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

---

感谢您的回复。我尝试了您的解决方案，但当我尝试在另一个组件上使用变量时，它说找不到变量primary。我在上面添加了用法示例。我必须将其用作对象项吗？例如backgroundColor:Defaultstyles.primary。如果要使用变量，请改用此选项：

backgroundColor:DefaultStyle.primary

primary

，@TimH的答案应该有效。感谢您的回复。我尝试了您的解决方案，但当我尝试在另一个组件上使用变量时，它说找不到变量primary。我在上面添加了用法示例。我必须将其用作对象项吗？如backgroundColor:Defaultstyles。primary使用此选项：

backgroundColor:DefaultStyle.primary

如果要使用变量

primary

，@tish的答案应该有效。