在react styles js文件中定义的导出全局变量

Question

我已经分开styles.js并app.js为一个简单的应用程序.我将图像资源定义为全局常量变量.(对于徽标和配置文件)我也尝试添加这些常量图像资源styles.js.但是使用我当前的方法和语法,我无法导出这些常量图像资源,styles.js因为它们没有在样式变量包装器中定义.

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

我已经指出我想在上面的代码中用注释进行更改.如果我想像上面那样路由源文件,我应该改变什么styles.js才能使用样式变量包装器同时导出常量全局变量？

Answer 1

您可以将样式导出为默认值,然后还可以导出另一个可以包含值或对象的变量.

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;

然后你可以在需要时导入默认导出和命名导出:

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