使用CSS样式表和类名进行React-Native样式设置

Question

我刚开始在一个React Native应用上工作。 官方文档建议 使用JavaScript对象为组件创建样式，如下所示，

<Text style={style.text}>Blah Blah</Text>
const style = {
    text: {
        fontSize: 20
    }
}

我正在尝试将 className 添加到 Text 属性中，以便可以使用简单的样式表添加 CSS。在 React Native 中是否可能实现这一点（我知道在 React 中可以这样做）？像这样的东西：

我想给 Text 元素添加一个 className 属性，这样我就可以使用简单的样式表来添加 CSS 了。不过，在 React Native 中能否实现这个呢（虽然我知道在 React 中可以）？类似这样的代码：

<Text className="text-style"></Text>

// from CSS file
text-style: {
    font-size: 20;
}

- rodiwa

---

不好意思，根据我的了解，这样做是行不通的。你可以查看SO关于样式的文档获取详细信息。 - Jigar Shah

据我所知，在React Native中不能使用CSS类。 - Paras Watts

Answer 1

React Native 工作时使用 CSS 样式的方式是，StyleSheet 对象是 CSS 语言的 js 副本。你只需创建一个 .js 文件并导入包含 StyleSheet 对象的 js 对象即可。

StyleSheet JS 对象的示例：

import { StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({
  textStyle: {
    fontSize: 20,
  },
  otherStyle: {
    position: 'absolute',
    justifyContent: 'center',
  }
});

基本上它需要的是一个对象数组，这些对象遵循StyleSheet的API。一个好的经验法则是用驼峰式书写你所知道的CSS样式，例如用justifyContent代替justify-content。React Native引擎通过使用这些StyleSheet对象来尽力复制CSS，并且阅读文档和示例将帮助您了解StyleSheet的能力和限制（提示：flex和Dimensions API非常棒，百分比是字符串，例如'50%'）。

- Tierna D. Jack Lawless

---

这不是CSS的复制品--你正在向StyleSheet.create传递JSON对象，API是不同的，并且浏览器规范不存在。 - ryanwebjackson

Answer 2

在React Native中没有 `className`，但是你可以像这样使用一个样式对象：

<Text style={textStyle}>Some Words</Text>

const textStyle = {
    fontSize: 20
}

注意：一些样式属性的名称不同。例如，CSS中的font-size在React Native中为fontSize。

- Vahid Boreiri

---

text-style 是不正确的语法，无法工作。你不能在变量名中使用破折号。 - Zach

其实我正在开发一个使用Tailwind CSS的React Native应用，它到处都有className（而且它们非常有效）。不太确定具体发生了什么。附注：请看一下这个链接：https://www.nativewind.dev/ - undefined

Answer 3

需要配置React Native的Sass/CSS转换器 https://github.com/kristerkari/react-native-sass-transformer

将JSX的className属性转换为在React Native运行时计算样式的样式属性。该插件用于匹配包含解析的CSS媒体查询和CSS视口单位的样式对象与React Native。

请查看此链接：https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style

使用React Native TypeScript时，您还需要安装此软件包 https://github.com/kristerkari/react-native-types-for-css-modules

- Najathi

Answer 4

首先，您需要从react-native中导入StyleSheet。然后创建一个带有样式的对象。

import { StyleSheet, View } from "react-native"

const Home = () => {
  return(
    <View style={styles.container}></View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: blue,
    height: "100%",
  }
})

- viktor

Answer 5

文档所指的对象是JSX中的StyleSheet对象。您需要从react-native导入StyleSheet。您在此处编写的样式将进入该对象，您将使用StyleSheet创建该对象。

import {StyleSheet} from 'react-native';
var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    backgroundColor: '#0070af',
    alignItems: 'center',
    backgroundColor:'#0070af'
  },
  textstyle:{
    color:'white',
    fontFamily: "Roboto",
  }});

export default styles;

- Niraj Motiani

Answer 6

我不知道为什么没有人提到这一点，但我认为这样做会更好。

如何在ReactNative中使用CSS

创建一个名为App.moudle.css的文件来编写纯传统CSS，并像这样导入它-

import style from './App.module.css';

<View style={style.container}>

这样做会更好，因为它可以增加 react 和 react-native 之间的共享代码。

让我非常失望的是，目前还没有一种方法可以在 react-native 中使用 css 类。

- Aravind