React Native外部样式表

Question

在React Native中是否有一种方法可以将我的所有样式放在一个文件中,这样就可以很容易地维护(从我的角度来看),就像HTML中我们有一个.css文件一样.

而且我有一个模块,根据当前用户有不同的样式.

Answer 1

您可以使用所有样式创建一个样式组件,就像这样...

import { StyleSheet } from "react-native"

export default StyleSheet.create({
   ...
})

然后在需要样式的任何视图上,只需要它...

import styles from "./Styles"

Answer 2

根据ECMAScript 6,导出样式的正确方法就是这样.

style.js

import {StyleSheet} from 'react-native'

export default StyleSheet.create({

container: {
    flex: 1,
    marginTop: 20
},
welcome: {
    textAlign: 'center'
}
});

然后在您的主JS文件中,您可以像这样导入.

import styles from './style'

Answer 3

是的你可以

• 首先创建一个文件名 style.js 并创建您想要的任何样式，如下例所示：

样式.js

module.exports = {

    "centerRowAligment":{
        flex: 1,
        backgroundColor:"#a22a5f",
        flexDirection: 'row',
        alignItems:"center"
    },
    "centerColumnAligment":{
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center'
    }

}

然后在你的反应文件中导入它

import styles from './style'

然后在渲染组件中使用它

   <View style={styles.centerRowAligment}></View>

这应该可以正常工作！

Answer 4

你可以试试我的项目rn-less。

它使用 less.js 将样式表与 jsx/js 文件隔离开来。

我有一个VS Code 扩展，你可以轻松地在 .less 文件和 .js/.jsx 文件之间跳转。

Answer 5

您可以将此模块添加到管道中，并创建 Gulp 或 Webpack 任务以将 CSS 转换为 JavaScript。

https://github.com/sabeurthabti/react-native-css

根据我的经验，最好不要对 Web 和 React Native 使用相同的 CSS，因为 React Native 的样式表实际上并不级联。

或者，如果您愿意稍微改变一下您的管道，PostCSS，它是一个 CSS4 到 CSS3 的转译器，支持 SASS 的所有功能，也可以用于将 CSS 转译为 JavaScript

https://github.com/postcss/postcss-js