Spójrz na motywy Shoutem dla React Native.
Oto, co otrzymujesz dzięki motywowi Shoutem:
Styl globalny, w którym określony styl jest automatycznie stosowany do komponentu według nazwy stylu:
const theme = {
'my.app.ComponentStyleName': {
backgroundColor: 'navy',
},
};
Aktywowanie określonego stylu komponentu za pomocą styleName
(jak klasa CSS):
const theme = {
'my.app.ComponentStyleName': {
'.rounded': {
borderRadius: 20,
},
backgroundColor: 'navy',
},
};
// Implementation - will apply borderRadius to Component
<Component styleName="rounded"/>
Automatyczne dziedziczenie stylu:
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>
Styl zagnieżdżony dla komponentów złożonych:
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>
);
}
Aby to działało, musisz użyć StyleProvider
komponentu opakowania, który zapewnia styl wszystkim innym komponentom poprzez kontekst. Podobny do ReduxStoreProvider
.
Musisz także podłączyć komponent do stylu, connectStyle
aby zawsze używać połączonego komponentu. Podobny do Reduxconnect
.
export const styledComponent = connectStyle('my.app.ComponentStyleName',
{ ...defaultStyleIfAny })(Component);
Możesz zobaczyć przykład w dokumentacji.
I ostatnia rzecz, dostarczyliśmy również zestaw komponentów w naszym zestawie narzędzi interfejsu użytkownika, które są już połączone ze stylem, więc możesz je po prostu zaimportować i nadać styl w swoim globalnym stylu / motywie.