ios React Native 外部样式表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33595642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native External Stylesheet
提问by Sydney Loteria
Is there a way in React Native that I can put all of my styles in a single file so it can easily be maintained (from my perspective) like in HTML we have a .cssfile.
在 React Native 中是否有一种方法可以将我的所有样式放在一个文件中，以便可以轻松维护（从我的角度来看），就像在 HTML 中我们有一个.css文件一样。
And also I have a module where there are different styles based on a current user.
而且我还有一个模块，其中根据当前用户有不同的样式。
回答by Chris Geirman
You could simply create a Styles component like so with all your styles...
您可以简单地使用所有样式创建一个样式组件......
import { StyleSheet } from "react-native"
export default StyleSheet.create({
...
})
Then on any view needing styles, simply require it...
然后在任何需要样式的视图上，只需要它...
import styles from "./Styles"
回答by Hashan Seneviratne
According to ECMAScript 6, correct way to export your styles would be like this.
根据 ECMAScript 6，导出样式的正确方法是这样的。
style.js
样式.js
import {StyleSheet} from 'react-native'
export default StyleSheet.create({
container: {
flex: 1,
marginTop: 20
},
welcome: {
textAlign: 'center'
}
});
Then in your main JS file you can import like this.
然后在您的主 JS 文件中，您可以像这样导入。
import styles from './style'
回答by blackmiaool
You can try my project rn-less.
你可以试试我的项目rn-less。
It isolates your stylesheet from your jsx/js files with less.js.
它使用 less.js 将样式表与 jsx/js 文件隔离开来。
And I have a VS Code extensionfor it, with which you can jump between .less files and .js/.jsx files easily.
我有一个VS Code 扩展，你可以轻松地在 .less 文件和 .js/.jsx 文件之间跳转。
回答by Hussam Kurd
Yes you can
是的你可以
- First create a file name style.js and create what ever style you want like the following example:
- 首先创建一个文件名 style.js 并创建您想要的任何样式，如下例所示：
Style.js
样式.js
module.exports = {
"centerRowAligment":{
flex: 1,
backgroundColor:"#a22a5f",
flexDirection: 'row',
alignItems:"center"
},
"centerColumnAligment":{
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center'
}
}
Then in your react file just import it
然后在你的反应文件中导入它
import styles from './style'
And then use it in the render components
然后在渲染组件中使用它
<View style={styles.centerRowAligment}></View>
This should works fine !
这应该可以正常工作！
回答by Rollo
You could add this module to your pipeline, and create a Gulp, or Webpack task to transpile the CSS into JavaScript.
您可以将此模块添加到您的管道中，并创建一个 Gulp 或 Webpack 任务来将 CSS 转换为 JavaScript。
In my experience you're best of not using the same CSS for web and react native, because React Native's stylesheets don't actually cascade.
根据我的经验，最好不要将相同的 CSS 用于 Web 和 React Native，因为 React Native 的样式表实际上并没有级联。
Or if you're willing to change your pipeline a little bit, PostCSS, which is a CSS4 to CSS3 transpiler, which supports all the features of SASS, can also be used to transpile, CSS to JavaScript
或者如果你愿意稍微改变你的管道，PostCSS，它是一个 CSS4 到 CSS3 的转换器，它支持 SASS 的所有功能，也可以用来转换，CSS 到 JavaScript
回答by avatarfreak
I agree to @Chris Geirman solution. you can just create stylesSheet as mention above by Chris and import to any view. In case if you want to merge external styleSheet to your individual view/component stylesheet then you can use ES6 new feature Object.assign like so:
我同意@Chris Geirman 解决方案。您可以创建 Chris 上面提到的样式表并导入到任何视图。如果您想将外部样式表合并到您的单个视图/组件样式表，那么您可以使用 ES6 新功能 Object.assign ，如下所示：
styles = require('./StyleSheet');
style = require('./StyleSheet');
const viewStyle = Object.assign(styles, StyleSheet.create({ ... }); );
const viewStyle = Object.assign(styles, StyleSheet.create({ ... }); );
回答by user1709076
This works for me on the latest React:
这在最新的 React 上对我有用：
I have my stylesheet named CoolTextStyle.js (which is in the same directory as my index.ios.js). And it turns out you dont even need the 'StyleSheet' class
我的样式表名为 CoolTextStyle.js（与我的 index.ios.js 位于同一目录中）。事实证明你甚至不需要“StyleSheet”类
module.exports =
{
borderRadius:5
});
Then in index.ios.js
然后在 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);
回答by Toby Flemming
The whole process of defining styles in my JavaScript caused me a lot of confusion when I first moved over to React Native from Ionic so I hope this helps...
当我第一次从 Ionic 转向 React Native 时，在 JavaScript 中定义样式的整个过程让我感到很困惑，所以我希望这会有所帮助......
Firstly, you've got to understand that React Native is NOTjust an application running in a native WebView. Rather than rendering divs and spans your JavaScript is actually producing higher-level, platform-specific components.
首先，你要明白，阵营本土是不是只是在一个本地的WebView运行的应用程序。您的 JavaScript 不是渲染 div 和 spans，而是实际生成更高级别的、特定于平台的组件。
Therefore we can't apply the same styling rules (via external .css stylesheets) like you would a hybrid application written using another framework like Ionic. Well not entirely anyway (see below).
因此，我们不能像使用其他框架（如 Ionic）编写的混合应用程序一样应用相同的样式规则（通过外部 .css 样式表）。无论如何也不完全是（见下文）。
Both options mentioned above are valid solutions. Using:
上面提到的两个选项都是有效的解决方案。使用：
- Separate JavaScript files to make your styles more modular; and
- Using libraries to transpile CSS to React Native StyleSheet objects.
- 分离 JavaScript 文件，使您的样式更加模块化；和
- 使用库将 CSS 转换为 React Native StyleSheet 对象。
Note on latter option:Libraries like postcss-js won't enable you to use your CSS the way you normally would i.e. styling based on CSS selectors like .class and #id. Styles will still need to be passed through to components via props.
请注意后一个选项：像 postcss-js 这样的库不会让您像通常那样使用 CSS，即基于 CSS 选择器（如 .class 和 #id）进行样式设置。样式仍然需要通过 props 传递给组件。
