Styles globaux React Native

Je suis nouveau avec React et je comprends les avantages des styles en ligne basés sur des composants. Mais je me demande s'il existe un moyen décent d'avoir une sorte de style global. Par exemple, j'aimerais utiliser la même coloration de texte et de bouton dans mon application.

Plutôt que de répéter dans chaque composant (et de devoir ensuite le changer à x endroits si nécessaire), ma pensée initiale est de créer une classe StyleSheet «de base» dans son propre fichier et de l'importer dans mes composants.

Existe-t-il une meilleure ou plus «réaction»?

Vous pouvez créer une feuille de style réutilisable. Exemple:

style.js

'use strict';

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

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

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

});

Dans votre composant:

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

...puis:

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

Créez un fichier pour vos styles (IE, Style.js ).

Voici un exemple:

import { StyleSheet } from 'react-native';

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

Dans l'un des fichiers que vous souhaitez utiliser votre style, ajoutez ce qui suit:

import styles from './Style'

Si vous souhaitez simplement définir des variables globales, vous pouvez essayer.

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

Vous pouvez également essayer la feuille de style react-native-extended-style qui prend en charge les variables de style globales:

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

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

Vous devez créer un fichier pour y stocker tous les styles comme ' styles.js ' et écrire le code de type css selon vos besoins

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

});

et maintenant vous pouvez utiliser le style global comme vous pouvez le voir

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

Essayez ma bibliothèque react-native-style-tachyons , qui vous donne non seulement des styles globaux, mais un système de mise en page réactif et axé sur la conception avec des largeurs et des hauteurs par rapport à la taille de votre police racine.

Toutes ces méthodes répondent directement à la question, mais en ce qui me concerne, ce n'est pas la manière de le faire dans un système de conception basé sur des composants comme React.

Nous pouvons commencer avec des composants atomiques, puis les superposer et les regrouper jusqu'en haut. L'article suivant pourrait rendre cette réflexion plus claire: http://atomicdesign.bradfrost.com/chapter-2/

Dans le monde naturel, les éléments atomiques se combinent pour former des molécules. Ces molécules peuvent se combiner davantage pour former des organismes relativement complexes.

Si vous avez besoin d'un composant de base qui n'existe pas, créez-le. Ensuite, vous pouvez créer d'autres composants moins spécifiques avec. par exemple:

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

Ensuite, utilisez CustomTextpartout au lieu de Text. Vous pouvez aussi le faire avec View, div, spanou toute autre chose.

Fichier CSS externe main.css

'use strict';

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

module.exports = StyleSheet.create({

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

créer une instance de fichier css dans le composant.

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

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

Ici, vous pouvez trouver un moyen élégant de trier vos styles puis de les importer dans les différents composants, vous pouvez créer un dossier dans lequel vous rassemblez tous les fichiers de styles et créez et index.js qui va fonctionner comme façade:

l'index.js ressemblera à:

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

export { Variables, GlobalStyles };

puis importez comme ceci:

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

Ici pour plus d'informations:

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

Jetez un œil aux thèmes Shoutem pour React Native.

Voici ce que vous obtenez avec le thème Shoutem:

Style global où un certain style est automatiquement appliqué au composant par son nom de style:

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

Activation de certains styles spécifiques aux composants avec styleName(comme la classe CSS):

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

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

Héritage de style automatique:

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>

Style imbriqué pour les composants composés:

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

Pour que cela fonctionne, vous devez utiliser StyleProviderle composant wrapper qui fournit du style à tous les autres composants via le contexte. Similaire à Redux StoreProvider.

Vous devez également connecter votre composant au style avec connectStyleafin de toujours utiliser le composant connecté. Similaire à Redux connect.

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

Vous pouvez voir un exemple dans la documentation.

Une dernière chose, nous avons également fourni un ensemble de composants dans notre boîte à outils d'interface utilisateur qui sont déjà connectés au style, vous pouvez donc simplement les importer et les styliser dans votre style / thème global.