Question

我有一个带有login.js的React Native Project。在这个类中，我有几个视图等。这些视图使用样式表，它们在类中定义。现在我尝试将backGround颜色提取/转移到“容器类”（values.js）中，在那里我可以获得颜色（rgba）并在我的login.js类中使用它。由于我已经这样做了，颜色不再显示任何东西了。它是纯白色的，并没有采用我定义的颜色，这是某种红色。

这是我的登录代码： login.js

var Values=require('../values/values');

...
<View style={styles.titleContainer}>
    <Text style={styles.titleText}>{Strings.login}</Text>
</View>
...

var styles = StyleSheet.create({
container: {
    flexDirection: 'column',
    flex: 1
},
bg: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: windowSize.width,
    height: windowSize.height
},
titleContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 0.15,
    backgroundColor: Values.Color.COLOR_NAVIGATION_BAR,
},
})

这是我的“彩色容器/颜色组”： values.js

module.exports = {

API: [
    {
        //API
        API_BASE_URL: "",
        //LOCAL
        API_LOCAL_URL: "http://localhost:1986/",
    }],

Color: [
    {
        COLOR_NAVIGATION_BAR: 'rgba(163,63,59,1)',
        ......
        .....
    }],

Answer 1

我认为问题在于您使用的数组是导出对象的API和Color字段。导出的对象包含两个字段：API和Color，它们都是对象数组。因此，如果你想引用颜色值，那么这样的东西会起作用：

Values.Color[0].COLOR_NAVIGATION_BAR

但可能不是你真正想要的。很可能你的定义应该是这样的（请注意，为了保持一致性，可能最好在颜色和值中使用所有大写字母）：

module.exports={
    API: {
        API_BASE_URL: "",
        ...
    },
    COLOR: {
        COLOR_NAVIGATION_BAR: 'rgba(163,63,59,1)',
        ...
    }
}

你应该导入/引用它：

var VALUES=require('../values/values');
....

backgroundColor: VALUES.COLOR.COLOR_NAVIGATION_BAR,
...

将我的背景颜色转换为另一个JS-Class

1 个答案: