Reagisci agli stili globali nativi

Sono nuovo con React e capisco i vantaggi degli stili inline basati sui componenti. Ma mi chiedo se esista un modo decente per avere una sorta di stile globale. Ad esempio, mi piacerebbe utilizzare la stessa colorazione di testo e pulsanti in tutta la mia app.

Piuttosto che ripetere in ogni componente (e successivamente doverlo cambiare in x posti se necessario), il mio pensiero iniziale è quello di creare una classe StyleSheet 'base' nel proprio file e importarla nei miei componenti.

Esiste un modo migliore o più "Reagisci"?

Puoi creare un foglio di stile riutilizzabile. Esempio:

style.js

'use strict';

var React = require('react-native');

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

alwaysred: {
    backgroundColor: 'red',
    height: 100,
    width: 100,
},

});

Nel tuo componente:

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

...poi:

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

Crea un file per i tuoi stili (IE, Style.js).

Ecco un esempio:

import { StyleSheet } from 'react-native';

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

In uno qualsiasi dei file che desideri utilizzare con il tuo stile, aggiungi quanto segue:

import styles from './Style'

Se volessi solo impostare alcune variabili globali potresti provare.

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

Puoi anche provare il foglio di stile reattivo-nativo-esteso che supporta le variabili di stile globali:

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

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

Devi creare un file per memorizzare tutto lo stile in esso come ' styles.js ' e scrivere il codice di tipo css di cui hai bisogno

'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'
    }

});

e ora puoi usare lo stile globale come puoi vedere

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

Prova la mia libreria React-Native-Style-Tachyons , che non solo ti offre stili globali, ma anche un sistema di layout reattivo con larghezze e altezze relative alla dimensione del carattere principale.

Tutti questi metodi rispondono direttamente alla domanda, ma per quanto mi riguarda, non è il modo di farlo in un sistema di progettazione basato su componenti come React.

Possiamo iniziare con componenti atomici, quindi sovrapporli e raggrupparli fino in cima. Il seguente articolo potrebbe rendere più chiara questa linea di pensiero: http://atomicdesign.bradfrost.com/chapter-2/

Nel mondo naturale, gli elementi atomici si combinano per formare molecole. Queste molecole possono combinarsi ulteriormente per formare organismi relativamente complessi.

Se hai bisogno di un componente di base che non esiste, fallo. Quindi puoi creare altri componenti meno specifici con esso. per esempio:

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

Quindi usa CustomTextovunque invece di Text. È anche possibile farlo con View, div, spano qualsiasi altra cosa.

File CSS esterno main.css

'use strict';

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

module.exports = StyleSheet.create({

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

crea istanza del file css nel componente.

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

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

Qui puoi trovare un modo elegante per ordinare i tuoi stili e quindi importarli nei diversi componenti, puoi creare una cartella in cui raccogliere tutti i file di stili e creare e index.js che funzionerà come facciata:

index.js avrà il seguente aspetto:

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

export { Variables, GlobalStyles };

e poi importa in questo modo:

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

Qui per ulteriori informazioni:

https:// Thoughtbot.com/blog/structure-for-styling-in-react-native

Dai un'occhiata ai temi Shoutem per React Native.

Ecco cosa ottieni con il tema Shoutem:

Stile globale in cui un determinato stile viene applicato automaticamente al componente in base al nome dello stile:

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

Attivazione di determinati stili di componenti specifici con styleName(come la classe CSS):

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

// Implementation - will apply borderRadius to Component
<Component styleName="rounded"/>

Ereditarietà automatica dello stile:

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>

Stile nidificato per componenti composti:

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

Per farlo funzionare è necessario utilizzare StyleProvideril componente wrapper che fornisce lo stile a tutti gli altri componenti attraverso il contesto. Simile a Redux StoreProvider.

Inoltre è necessario collegare il componente allo stile con in connectStylemodo da utilizzare sempre il componente connesso. Simile a Redux connect.

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

Puoi vedere un esempio nella documentazione.

Un'ultima cosa, abbiamo anche fornito un set di componenti nel nostro UI ToolKit che sono già collegati allo stile, quindi puoi semplicemente importarli e lo stile nel tuo stile / tema globale.