CSS 与 React Native

Posted 2023-02-16

【中文标题】CSS 与 React Native

【英文标题】：CSS with React Native

【发布时间】：2021-12-27 09:59:29

【问题描述】：

所以我正在使用经典 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>
    );
  

【参考方案1】：

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

【讨论】：

没明白你的意思，抱歉。经典CSS不能写自定义变量吗？

不像经典的 CSS。您仍然可以将颜色保存为变量并导出/导入它们。那么您可以使用这些变量来确保您始终在全局范围内使用相同的颜色。