反应原生全球风格

我是React新手，我了解基于组件的内联样式的好处。 但是我想知道是否有一个体面的方式来拥有某种全球风格。 例如，我想在我的应用程序中使用相同的文本和button着色。

而不是在每个组件中重复（并随后必须在x位置进行更改），我最初的想法是在自己的文件中创build一个“基本”StyleSheet类，并将其导入到我的组件中。

有更好或更“反应”的方式？

Answer 1

你可以创build一个可重用的样式表js。 例：

样式表（style.js）：

'use strict'; var React = require('react-native'); var { StyleSheet, } = React; module.exports = StyleSheet.create({ alwaysred: { backgroundColor: 'red', height: 100, width: 100, }, }); 

在组件中使用

 var s = require('./style'); 

然后

 <View style={s.alwaysred} ></View> 

Answer 2

为您的样式创build一个文件（IE， Style.js ）。

这里是一个例子：

 import { StyleSheet } from 'react-native'; export default StyleSheet.create({ container: { flex: 1 }, welcome: { fontSize: 20 } }); 

在你想使用你的风格的任何文件中，添加以下内容：

 import styles from './Styles' 

Answer 3

您也可以尝试支持全局样式variables的react-native-extended-stylesheet ：

 // app.js EStyleSheet.build({ buttonColor: 'green' }); // component.js var styles = EStyleSheet.create({ button: { backgroundColor: '$buttonColor', ... } }); 

Answer 4

试试我的图书馆react-native-style-tachyons ，它不仅给你全局的风格，而且还有一个devise优先的响应式布局系统，相对于你的根字体大小，它的宽度和高度都是相同的。

Answer 5

如果你只是想设置一些全局variables，你可以尝试。

AppStyles.js

 export default AppStyles = { colour: { background: '#f4f9fd', font: '#434e5a', primary: '#ff3b30' } } 

index.ios.js

 import AppStyles from './AppStyles'; const styles = StyleSheet.create({ container: { backgroundColor: AppStyles.colour.background } }); 

Answer 6

看看React Native的Shoutem主题 。

这里是你用Shoutem主题得到的东西：

通过其样式名称将某些样式自动应用于组件的全局样式：

 const theme = { 'my.app.ComponentStyleName': { backgroundColor: 'navy', }, }; 

使用styleName （如CSS类）激活特定的组件特定样式：

 const theme = { 'my.app.ComponentStyleName': { '.rounded': { borderRadius: 20, }, backgroundColor: 'navy', }, }; // Implementation - will apply borderRadius to Component <Component styleName="rounded"/> 

自动样式inheritance：

 const theme = { 'my.app.ComponentStyleName': { 'my.app.ChildComponentStyleName': { backgroundColor: 'red', }, '.rounded': { borderRadius: 20, }, backgroundColor: 'navy', }, }; // Implementation - will apply red background color to ChildComponent <Component styleName="rounded"> <ChildComponent/> </Component> 

组合组件的嵌套样式：

 const theme = { 'my.app.ComponentStyleName': { containerView: { paddingTop: 10, }, innerView: { backgroundColor: 'yellow', }, }, }; // Of course do not forget to connect Component function Component({ style }) { return ( <View style={style.containerView}> <View style={style.innerView}> <Text>Warning with yellow background.</Text> </View> </View> ); } 

为了得到它，你需要使用StyleProvider ，它是通过上下文为所有其他组件提供样式的包装组件。 类似于Redux StoreProvider 。

此外，您还需要使用connectStyle将组件连接到样式，以便始终使用连接的组件。 类似于Redux connect 。

 export const styledComponent = connectStyle('my.app.ComponentStyleName', { ...defaultStyleIfAny })(Component); 

您可以在文档中看到示例。

最后一件事，我们还在UI Toolkit中提供了一组已经连接到样式的组件，所以你可以在你的全局样式/主题中导入它们和样式。