反应本机全局样式

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

我最初的想法是在自己的文件中创建一个“基本”StyleSheet 类，然后将其导入到我的组件中，而不是在每个组件中重复执行(如果需要，随后还必须在 x 个位置进行更改)。

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

96720 次浏览
小开
最佳答案

您可以创建一个可重用的样式表。例如:

Style.js

'use strict';
import { StyleSheet } from 'react-native';


module.exports = StyleSheet.create({
alwaysred: {
backgroundColor: 'red',
height: 100,
width: 100,
},
});

在您的组件中:

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

然后:

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

您还可以尝试支持全局样式变量的 react-native-extended-stylesheet:

// app.js
EStyleSheet.build({
buttonColor: 'green'
});


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

为您的样式创建一个文件(即 Style.js)。

这里有一个例子:

import { StyleSheet } from 'react-native';


export default StyleSheet.create({
container: {
flex: 1
},
welcome: {
fontSize: 20
}
});

在要使用样式的任何文件中，添加以下内容:

import styles from './Style'
小开

如果您只想设置一些全局变量，可以尝试这样做。

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
}
});
小开

看看 Shoutem 主题曲中的“反应原生物”。

Here is what you get with Shoutem Theme:

全局样式，其中某些样式通过样式名自动应用于组件:

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"/>

自动样式继承:

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>
);
}

To get it work you need to use StyleProvider, the wrapper component which provides style to all other component through context. Similar to Redux StoreProvider.

此外，你还需要将你的组件和样式与 connectStyle连接起来，这样你就可以一直使用连接元件(图论)。与 Redux connect类似。

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

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

最后一件事，我们还在 UI 工具包中提供了一组已经连接到样式的组件，所以您可以直接导入它们并在全局样式/主题中使用样式。

小开

您必须创建一个文件来存储所有样式在它像’Styles.js’，并编写 css 类型代码作为您的需要

'use strict';
import {StyleSheet} from 'react-native';


export default StyleSheet.create({


container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},


title: {
fontSize: 10,
color: '#000',
backgroundColor: '#fff'
},


button: {
fontSize: 12,
color: '#000',
backgroundColor: '#fff'
}


});

现在您可以使用全局样式，如您所见

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import StyleSheet from './config/styles';


export default class App extends Component {


render() {
return (
<View
style={StyleSheet.container}>
<Button
style={StyleSheet.button}
title="Go to Lucy's profile"
/>
</View>
);
}
}
小开

外部 CSS 文件 main.CSS

'use strict';


var {
StyleSheet,
} = 'react-native';


module.exports = StyleSheet.create({


main: {
backgroundColor: 'gray',
height: 20,
width: 100,
}
});

在组件中创建 css 文件的实例。

var mainCss = require('./main');


<View style={mainCss.main}><Text>Hello</Text></View>
小开

所有这些方法都直接回答了这个问题，但就我而言，在像 React 这样的基于组件的设计系统中，这不是解决问题的方法。

我们可以从原子组件开始，然后将它们分层并一直分组到顶部。下面的文章可能会使这一思路更加清晰: Http://atomicdesign.bradfrost.com/chapter-2/

在自然界中，原子元素结合在一起形成 这些分子可以进一步结合形成相对 复杂的生物体。

如果需要一个不存在的基本组件，可以创建它。然后你可以用它来制造其他不那么具体的组件。例如:

// rerender is cheaper without style prop when
// the default style is an unchanged reference
// instead of a new object every time.
const style = {
color   : 'MidnightBlue',
fontSize: 14,
}


function getStyle (styleProp) {
// styleProp is able to overwrite style
if (styleProp) return {...style, ...styleProp}
else return style
}


export default function CustomText (props) {
return (
<Text style={getStyle(props.style)}>
{props.children}
</Text>
)
}

然后在任何地方使用 CustomText而不是 Text。你也可以使用 View、 div、 span或其他任何东西。

小开

在这里你可以找到一个优雅的方式来排序你的样式，然后导入到不同的组件中，你可以创建一个文件夹，在其中你可以收集所有的样式文件，并创建和 index.js，这将作为 facade 工作:

Js 会是这样的:

import Variables from './variables';
import GlobalStyles from './global';


export { Variables, GlobalStyles };

然后像这样进口:

import { GlobalStyles } from './stylesheets/index';

如需进一步资料，请浏览:

Https://thoughtbot.com/blog/structure-for-styling-in-react-native

小开

我也是用类似的方法

创建一个名为“常量”的目录 在./Constants/AppStyles.js 中创建一个文件

 /**
* Project level stylesheet for common styles
*/




import { StyleSheet } from 'react-native';


export default StyleSheet.create({
container: {
flex: 1,
margin: 20,
alignItems: 'center',
alignContent: 'center',
paddingVertical: 60
}
  

});

Then in App.js reference this file and the styles created.

import React from 'react';
import {
View,
Text
} from 'react-native';
import AppStyles from './constants/AppStyles';


const App = () => {
return (
<View style={ AppStyles.container }>
<Text>MOST BASIC Template EVER!</Text>
</View>
);
};


export default App;

Traps I fell into

  • 我在导入{ AppStyles }从’./Constants/AppStyles’前后使用了大括号; 错误:-(
  • 我创建了 AppStyles 作为一个组件，并尝试导出一个常量错误: -)

在网上找到了一门好课程，然后从中找到了答案

小开

更好的解决方案是使用 global对象并创建一个单独的 theme文件。

在根文件中导入该文件。

import theme from './theme'
global.theme = theme

然后，项目中任何地方的任何组件都可以像下面这样使用它

<Text style={global.theme.text} > Stackoverflow Answer </Text>

这样，我们就不必一次又一次地导入主样式文件。可以通过一个文件管理主题


提交答案