反应本机外部样式表
在React Native中有一种方法，我可以将所有样式放在单个文件中，以便可以很容易地维护（从我的angular度来看），就像在HTML中一样.css文件。
而且我也有一个基于当前用户有不同风格的模块。
你可以简单地创build一个样式组件，像所有你的样式一样…
'use strict' const React = require('react-native'); const { Stylesheet } = React; module.exports = Stylesheet.create({ ... });
然后在任何需要样式的视图，只需要它…
styles = require('./Styles');
根据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'
您可以将此模块添加到您的pipe道中，并创build一个Gulp或Webpack任务以将CSS转换为JavaScript。
根据我的经验，您最好不要使用相同的CSS来处理网页，因为React Native的样式表实际上并没有级联。
或者如果你愿意改变你的pipe道，PostCSS，这是一个CSS4到CSS3的编译器，它支持SASS的所有function，也可以用于编译，CSS到JavaScript
是的你可以
- 首先创build一个文件名style.js并创build你想要的样式，如下例所示：
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>
这应该工作正常！
我同意@Chris Geirman解决scheme。 你可以像Chris上面提到的那样创buildstylesSheet并导入到任何视图。 如果你想合并外部styleSheet到你的单个视图/组件样式表，那么你可以使用ES6的新特性Object.assign像这样：
styles = require（'./ StyleSheet'）;
const viewStyle = Object.assign（styles，StyleSheet.create（{…}）;）;
这对我最新的反应：
我有我的样式表CoolTextStyle.js（这是在我的index.ios.js相同的目录中）。 事实certificate，你甚至不需要'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);
在我的JavaScript中定义样式的整个过程给我造成了很多困惑，当我第一次从Ionic移到React Native时，所以我希望这有助于…
首先，你必须明白，React Native不仅仅是一个运行在本地WebView中的应用程序。 而不是渲染div和跨越你的JavaScript实际上是生产更高层次，特定于平台的组件。
因此，我们不能像使用Ionic等其他框架编写混合应用程序一样应用相同的样式规则（通过外部.css样式表）。 好吧，不完全是（见下文）。
上述两个选项都是有效的解决scheme。 使用：
- 单独的JavaScript文件，使您的风格更模块化; 和
- 使用库将CSS转换为React Native StyleSheet对象。
注意后一个选项：像postcss-js这样的库不能像你通常那样使用你的CSS，也就是基于像.class和#id这样的CSSselect器的样式。 样式仍然需要通过道具传递给组件。
你可以尝试我的项目。
它使用less.js将你的样式表从你的jsx / js文件中分离出来。
我有一个VS代码扩展名 ，可以轻松地在.less文件和.js / .jsx文件之间跳转。
