Export globale Variable in Reaktion Stile definiert js Datei

Question

Ich habe styles.js und app.js für eine einfache App getrennt. Und ich habe Bildressourcen als globale konstante Variablen definiert. (Für Logos und Profile) habe ich versucht, diese konstanten Bildquellen auch in styles.js hinzuzufügen. Aber mit meiner aktuellen Methode und Syntax kann ich diese konstanten Bildressourcen nicht aus styles.js exportieren, da sie nicht in Variablen Wrapper definiert sind.

styles.js:

'use strict' 

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

/* 
    const background_img= require("../../resource/mybackground.png"); 
    I tried to define the resource path here 
*/ 

var styles = StyleSheet.create({ 
    /*Styles Definition*/ 
}); 

export default styles 

app.js:

'use strict' 

import React, { Component } from 'react'; 
import { AppRegistry, Text, TextInput, View, Image, 
TouchableOpacity, Alert} from 'react-native'; 
import styles from './styles.js'; 

/*const background= require("../../resource/mybackground.png");*/ 
// I want to move this part to styles.js 


export class LoginScene extends Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Image 
     style={[styles.background, styles.container]} 
     source={background} //I want to replace to styles.background_img 
     resizeMode="cover" 
     ></Image> 
     /*Other view definitions*/ 
    ); 
    } 
} 

export default LoginScene 

ich angegeben habe, wo ich meine Änderung in dem obigen Code mit Kommentaren machen wollen. Wenn ich die Quelldatei so weiterleiten möchte, wie ich es oben getan habe, was soll ich in styles.js ändern, damit ich die konstanten globalen Variablen gleichzeitig mit variablem Wrapper-Format exportieren kann?

Answer 1

Sie können Stile als Standard exportieren, dann können Sie auch eine andere Variable exportieren, die einen Wert oder ein Objekt enthalten kann.

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

export const assets = { 
    background: require("../../resource/mybackground.png"), 
} 

var styles = StyleSheet.create({ 
    /*Styles Definition*/ 
}); 

export default styles; 

dann können Sie nur die Standard-Import und die genannten Ausfuhren bei Bedarf:

import styles, { assets } from './styles.js';