时间戳

首页 > 解决方案 > CSS 与 React Native

css - CSS 与 React Native

问题描述

所以我正在用经典的 CSS 运行 react native。我正在尝试通过使用 CSS 设置颜色变量来设置配色方案。从标题开始：

header.module.css：

:root {
  --brand-Black: '#0A0908';
  --secondary-Black: '#27262C';
  --brand-Blue-light: '#86BBD8';
  --brand-Green: '#247B9F';
  --brand-Gold: '#DBAD06';
  --brand-Blue-dark: '#005AA4';
  --brand-Blue: '#4392F1';
  --brand-Red: '#DB2955';
  --brand-Red-dark: '#831933';
  --brand-Grey: '#999999';
}

.text-default {
  color: blue;
  font-style: normal;
  font-weight: bold;
  font-size: 63px;
  line-height: 64px;
  display: flex;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 147px;
  padding-top: 24px;
  background-color: var(--brand-Blue-light);
}

我抓住了容器的容器类，但颜色没有出现。我究竟做错了什么？有任何想法吗？

这里也是 header.js 文件：

    import React from 'react';
import {Image, Text, View} from 'react-native';
import styles from '../../assets/styles/Header.module.css';
import colors from '../../config/colors';

export default class Header extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title} >{this.props.name}</Text>
        <Image
          style={styles.image}
          source={{
            uri: this.props.image,
          }}
        />
      </View>
    );
  }
}

标签： cssreactjsreact-nativeglobal-variables

解决方案

不可能。您必须将样式编写为对象，通常使用“StyleSheet.create({})”完成：https ://reactnative.dev/docs/stylesheet

推荐阅读