1

전체 앱에서 사용할 수있는 기본 색상에 대해 2 가지 변수를 만들고 싶습니다. 코드는 다음과 같습니다.반응성 네이티브에서이 두 변수를 함께 내보내려면 어떻게해야합니까?

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

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

앱 구성 요소에서 사용하기 위해이 두 변수를 함께 내보내려면 어떻게해야합니까? 솔루션과

문제는 다음과 같습니다

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 './variables'; 

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

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

당신이 그들을 내보낼 수 있습니다 변수 주

답변

1

을 찾을 수 없습니다 말한다 :

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

답장을 보내 주셔서 감사합니다. 귀하의 솔루션을 시도했지만 다른 구성 요소에 변수를 사용하려고하면 변수 기본을 찾을 수 없다고합니다. 위의 사용 예제를 추가했습니다. 객체 항목으로 사용해야합니까? backgroundColor : Defaultstyles.primary – Artur

+0

대신에 : backgroundColor : DefaultStyle.primary' – Val

+0

'primary '변수를 사용하려면 @ TimH의 대답이 작동해야합니다. – Val

1

명명 된 내보내기를 수행 할 수 있습니다. 예 : :

import { primary, secondary } from 'YOUR_FILE_PATH' 
0

내가 더 좋은 것을, 당신은 순간() 시간, 장치 측정 등처럼 저장할 수있는 글로벌 파일을 정의 할 좋아 :

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

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

export { primary, secondary }; 

는 그 후, 당신은을 통해 스타일을 가져올 수 있습니다 .

코드에서 다음

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

export default global 

와 global.js :

import GLOBAL from '(directory)/global' 

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

모든 앱 구성을 저장할 수있는 글로벌 파일을 만드는 것이 좋습니다.