グローバルスタイルを使用してunderlineColorAndroidを定義する

Question

グローバルスタイルを定義するために使用しているファイルがあります。 underlineColorAndroidの小道具に使用するファイル内にconstを定義したいと思います。

私のグローバルスタイルシートは、次のようになります。

const React = require('react-native') 

const { StyleSheet } = React 

const underlineColorAndroid = '#F86C51' 

module.exports = StyleSheet.create({ 

    background: { 
    backgroundColor: '#F5FCFF', 
    }, 

}) 

私はこのようなファイルをインポートする：

import globalStyles from '../styles/global' 

をそして私はこのような小道具内のスタイルを使用します。

underlineColorAndroid={globalStyles.underlineColorAndroid} 

これは、私はこれを行うことができますどのようなアイデアは動作しません？

Answer 1

代わりmodule.exports構文を使用しての、あなたがデフォルトと名付け輸出の両方を定義するためにES6 export statementsを使用することができます。

export const underlineColorAndroid = '#F86C51' 

export default StyleSheet.create({ 
    background: { 
    backgroundColor: '#F5FCFF', 
    }, 
}) 

デフォルトのエクスポートは、以前のようにインポートすることができます。

import globalStyles from '../styles/global'; 

という名前の輸出中破括弧を使用してインポートして、構造解除を示すことができます。

import { underlineColorAndroid } from '../styles/global'; 

同時に

または両方：

import globalStyles, { underlineColorAndroid } from '../styles/global'; 

しかし、明確にするため、異なるファイルにスタイルシートと名前の変数を分割した方がよいかもしれません。