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';

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

1 个答案: