如何在 React Native 中使用 CSS

Posted 2023-02-22

【中文标题】如何在 React Native 中使用 CSS

【英文标题】：How can I use CSS in ReactNative

【发布时间】：2017-08-14 10:48:30

【问题描述】：

我可以使用 CSS 来设置我的 ReactNative 组件的样式吗？目前我只能像这样使用 StyleSheet：

var styles = React.StyleSheet.create(
 autocomplete: 
   backgroundColor: '#FFF',
   zIndex: 5,
 ,
 ...

我想使用 CSS 而不是 ReactJs

【问题讨论】：

查看文档以获取更多信息facebook.github.io/react-native/releases/0.23/docs/…

修复上面的链接：reactnative.dev/docs/style

【参考方案1】：

纯 CSS 是什么意思？

看看styled-components，该项目正在积极开发中。

这允许您使用 css 为您的反应组件设置样式。

【讨论】：

我的意思是 css。

【参考方案2】：

我曾经遇到过同样的问题，我使用this 组件解决了它。我看到它不再处于开发阶段，但对我来说它工作得很好。

它的作用基本上是获取您的 CSS 文件，并从中生成一些样式表组件，您可以轻松地将这些组件集成到您的 react 应用程序中。

【参考方案3】：

试试这个库： https://atom.io/packages/atom-react-native-css

您可以使用 CSS 为组件设置样式并内置对 SASS 的支持。

【参考方案4】：

<Text style=backgroundColor:'#FFF',zIndex: 5></Text>

【参考方案5】：

首先创建一个名为App.module.css的文件

然后在这里写你的纯CSS

.container 
  background-color: rgb(44, 0, 95);
  width: 100%;
  height: 100%;

那么，

在你的js文件中导入文件

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

现在您可以像正常反应原生样式一样使用这种样式

<View style=style.container>