web-dev-qa-db-fra.com

Réagissez aux styles globaux natifs

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

Plutôt que de répéter dans chaque composant (et ensuite de le changer tous les x 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.

Y a-t-il une meilleure façon ou plus de «réagir»?

react-native
63
Patm

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>
94
boredgames

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

Voici un exemple:

import { StyleSheet } from 'react-native';

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

Dans les fichiers dans lesquels vous souhaitez utiliser votre style, ajoutez les éléments suivants:

import styles from './Style'
53
Barlow Tucker

Si vous voulez 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
    }
});
8
Rob

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

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

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

Vous devez créer un fichier contenant 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>
    );
  }
}
7
Amintabar

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

2
Fabian Zeindl

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>
0
harpreet cheema

Toutes ces méthodes répondent directement à la question mais ce n'est pas la façon de le faire. Ces personnes sont coincées dans l’ancienne façon de penser en modélisant les éléments disponibles. Dans React, vous créez des composants. Donc, si vous avez besoin d'un composant de base qui n'existe pas, vous le fabriquez. par exemple:

function getStyle (styleProp) {
  return {
    color   : getTheme().text,
    fontSize: 14,
    ...styleProp
  }
}

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

et utilisez ensuite CustomText partout au lieu de Text. Vous pouvez également le faire avec View, div, span ou toute autre chose.

0
ThaJay