React Native Native Stylesheet

Question

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

而且我还有一个模块，其中有基于当前用户的不同风格。

Answer 1

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

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

在我的经验，你最好不要使用网页相同的CSS和反应本土的，因为本土作出反应的样式表实际上并不级联。

---

或者，如果你愿意改变你的管道一点点，PostCSS，这是一个CSS4到CSS3 transpiler，支持SASS的所有功能外，还可以用来transpile，CSS与JavaScript

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

Answer 2

你可以简单地创建一个样式组件，像这样用你的风格......

'use strict' 
const React = require('react-native'); 
const { Stylesheet } = React; 

module.exports = Stylesheet.create({ 
    ... 
}); 

然后在任何视图需要的款式，只要求它...

styles = require('./Styles'); 

Answer 3

我同意@克里斯Geirman解决方案。你可以像Chris上面提到的那样创建stylesSheet并导入到任何视图。如果你想将外部styleSheet合并到你的单个视图/组件样式表中，那么你可以像这样使用ES6的新特性Object.assign：

styles = require（'./ StyleSheet'）; （样式，StyleSheet.create（{... }）; ）;以及其中，

Answer 4

在我的JavaScript定义样式的整个过程给我带来了很多困惑，当我第一次移到反应离子从本地，所以我希望这可以帮助...

首先，你要明白， React Native是而不是只是运行在本机WebView中的应用程序。而不是渲染div和跨越你的JavaScript实际上正在生产更高层次，特定于平台的组件。

因此，我们不能像使用Ionic等其他框架编写混合应用程序一样应用相同的样式规则（通过外部.css样式表）。好吧，不完全是（见下文）。

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

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

注意对后一种选择：图书馆像postcss-JS不会让你使用你的CSS，你通常会即样式基于CSS选择喜欢的.class和#ID的方式。样式仍然需要通过道具传递给组件。

Answer 5

这对我的作品在最新的阵营：

我有我的样式表命名CoolTextStyle.js（这是在同一个目录中我index.ios.js）。而事实证明，你甚至不需要的“样式表”级

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 6

是的，你可以

• 首先创建一个文件名的风格。 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 7

根据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 8

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

它使用less.js将您的样式表从jsx/js文件中分离出来。

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