Question

在React Native中是否有一种方法可以将我的所有样式放在一个文件中，以便可以轻松地维护（从我的角度来看），就像在HTML中我们有一个.css文件一样。

此外，我还有一个基于当前用户的不同样式的模块。

Answer 1

您可以使用所有样式创建样式组件......

country  year            X  X1
      A  1990  380,4009552   0
      A  1991  384,1316813   0
      B  1990  569,9407288   1
      B  1991  622,3796544   1
      C  1990   690,842629   1

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

import { StyleSheet } from "react-native"

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

Answer 2

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

style.js

import React, {StyleSheet} from 'react-native'

export default StyleSheet.create({

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

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

import styles from './style'

Answer 3

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

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

根据我的经验，你最好不要在网上使用相同的CSS并做出本机反应，因为React Native的样式表实际上并没有级联。

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

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

Answer 4

是的，你可以

首先创建一个文件名style.js并创建任何样式你想要如下例子：

Style.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 5

我同意@Chris Geirman解决方案。您可以像Chris上面提到的那样创建stylesSheet并导入到任何视图。如果要将外部样式表合并到单个视图/组件样式表，则可以使用ES6新功能Object.assign，如下所示：

styles = require（＆＃39; ./ StyleSheet＆＃39;）;

const viewStyle = Object.assign（styles，StyleSheet.create（{ ... }）; ）;

Answer 6

这适用于我最新的React：

我的样式表名为CoolTextStyle.js（与index.ios.js位于同一目录中）。事实证明你甚至不需要'StyleSheet'类

module.exports = 
{
  borderRadius:5
});

然后在index.ios.js

import React, { Component, PropTypes } from 'react';
import { View, Text, TextInput,TouchableHighlight,StatusBar } from 'react-native';

var cool_text_style = require('./CoolTextStyle');

export default class delme extends Component 
{
  render() 
  {
    return (
  <View>
    <StatusBar hidden={true} />
    <Text>Login</Text>
    <TextInput placeHolder='UserName' style={cool_text_style}></TextInput>
  </View>
)
  }
}


AppRegistry.registerComponent('delme', () => delme);

Answer 7

您可以尝试我的项目rn-less。

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

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

Answer 8

当我第一次从Ionic转移到React Native时，我在JavaScript中定义样式的整个过程让我感到很困惑，所以我希望这会有所帮助......

首先，您必须了解React Native NOT 只是在本机WebView中运行的应用程序。而不是渲染div和跨越你的JavaScript实际上是生成更高级别的平台特定组件。

因此，我们不能像使用像Ionic这样的其他框架编写的混合应用程序那样应用相同的样式规则（通过外部.css样式表）。不管怎么说（见下文）。

上述两个选项都是有效的解决方案。使用：

单独的JavaScript文件，使您的样式更加模块化;和
使用库将CSS转换为React Native StyleSheet对象。

关于后一个选项的注意事项：像postcss-js这样的库将无法像往常那样使用CSS，即基于CSS选择器（如.class和#id）的样式。样式仍然需要通过道具传递给组件。

Answer 9

鉴于隔离，上述答案都不是完美的。这是一个简单的javascript要求，它将为您提供Is there a way in React Native that I can put all of my styles in a single file的答案。

只需创建一个文件夹和文件。例如：-MyApp / cssstyle / StyleSheet.js
然后是简单的module.export对象，它包含屏幕名称和相应的样式。

const {StyleSheet} = require('react-native');

module.exports = {

  login: StyleSheet.create({
    bg1: {
      backgroundColor: 'red',
    },
  home: StyleSheet.create({
    bg2: {
      backgroundColor: 'yellow',
    },
  profile: StyleSheet.create({
    bg3: {
      backgroundColor: 'green',
    },

  }),

};

现在在您要应用样式的主屏幕上（例如：login.js）。 require your styles with proper StyleSheet path。在我的示例中，它是MyApp/cssstyle/StyleSheet

const styles = require('MyApp/cssstyle/StyleSheet').login

然后像使用它

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

仅此而已，通过这种方式，您可以隔离不同屏幕的样式，与此同时，您可以将所有样式保存在一个文件中。

React Native外部样式表

9 个答案: