Reagieren Sie auf native globale Stile

96

Ich bin neu in React und verstehe die Vorteile der komponentenbasierten Inline-Stile. Aber ich frage mich, ob es einen vernünftigen Weg gibt, einen globalen Stil zu haben. Zum Beispiel möchte ich in meiner App dieselbe Text- und Schaltflächenfarbe verwenden.

Anstatt in jeder Komponente zu wiederholen (und sie anschließend bei Bedarf an x ​​Stellen zu ändern), besteht mein erster Gedanke darin, eine 'Basis'-StyleSheet-Klasse in einer eigenen Datei zu erstellen und in meine Komponenten zu importieren.

Gibt es einen besseren oder mehr "Reagieren" Weg?

Patm
quelle

Antworten:

118

Sie können ein wiederverwendbares Stylesheet erstellen. Beispiel:

style.js

'use strict';

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

var {
  StyleSheet,
} = React;

module.exports = StyleSheet.create({

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

});

In Ihrer Komponente:

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

...dann:

<View style={s.alwaysred} ></View>
Langeweile
quelle
Ja, das habe ich beschrieben. Vielen Dank für die Bestätigung, dass ich die richtige Idee hatte. Wird vorerst als richtige Antwort markiert.
Patm
17
Jetzt können Sie einfach verwendenimport { StyleSheet } from 'react-native';
LYu
Ich habe eine Antwort hinzugefügt, die einen anderen Weg erklärt, um einen globalen Stil zu erhalten. Vielleicht möchten Sie einen Blick auf stackoverflow.com/questions/30853178/react-native-global-styles/… werfen . Es ist weitaus flexibler und reaktionsfreudiger, da statische Definitionen vermieden werden.
Herr Br
Ich bin anderer Meinung, dies ist nicht trocken und auch nicht komponentenbasiertes Design (oder Architektur), wie es im React-Ökosystem empfohlen wird. Jede Komponente mit Standardstil style={defaultStyle}muss hinzugefügt werden. Stattdessen können Sie ein erstellen DefaultViewund dieses anstelle des bereitgestellten verwenden view, das Ihrer Spezifikation entspricht. Ich habe vor einiger Zeit
ThaJay
86

Erstellen Sie eine Datei für Ihre Stile (IE, Style.js).

Hier ist ein Beispiel:

import { StyleSheet } from 'react-native';

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

Fügen Sie in einer der Dateien, die Sie für Ihren Stil verwenden möchten, Folgendes hinzu:

import styles from './Style'
Barlow Tucker
quelle
7
Ich vermute, diese Antwort ist jetzt relevanter!
villancikos
1
'./Styles' sollte './Style' sein, um mit dem Dateinamen Style.js
oOEric
Doppelte Antwort stackoverflow.com/a/30858201/5243543
ThaJay
9

Wenn Sie nur einige globale Variablen festlegen möchten, können Sie es versuchen.

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
    }
});
rauben
quelle
Sie brauchen den Import in AppStyles.js nicht, aber dies ist perfekt, wenn Sie nur einige einfache globale Stilvariablen möchten!
Willedanielsson
Doppelte Antwort stackoverflow.com/a/30858201/5243543
ThaJay
8

Sie können auch React-Native-Extended-Stylesheet ausprobieren , das globale Stilvariablen unterstützt:

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

// component.js
var styles = EStyleSheet.create({
  button: {
    backgroundColor: '$buttonColor',
    ...
  }
});
Vitalets
quelle
1
Arbeite wie ein Zauber;)
EQuimper
8

Sie müssen eine Datei erstellen, um alle darin enthaltenen Stile wie ' styles.js ' zu speichern , und den CSS-Typcode nach Bedarf schreiben

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

});

und jetzt können Sie den globalen Stil verwenden, wie Sie sehen können

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>
    );
  }
}
Amintabar
quelle
Doppelte Antwort stackoverflow.com/a/30858201/5243543
ThaJay
2

Versuchen Sie, meine Bibliothek reagieren-native-style-Tachyonen , die nicht nur Sie globale Stile gibt, sondern ein Design-first, reaktions Layouten System mit Breiten und Höhen in Bezug auf Ihre Wurzel Schriftgröße.

Fabian Zeindl
quelle
Das ist interessant! Auf den ersten Blick sah es komisch aus, aber wenn ich darüber nachdenke und bedenke, dass ich weniger Code schreiben müsste, scheint es ziemlich gut zu sein.
Niclas
Ich bin froh, dass es bei dir funktioniert. Sie werden lernen, die Abstandsskala besonders zu schätzen. Sie können sich gerne an uns wenden, wenn Sie Unterstützung benötigen.
Fabian Zeindl
1
@Niclas Ich würde mich freuen , wenn Sie mein Paket auf NPM veröffentlichen könnten : npmjs.com/package/react-native-style-tachyons . Der Grund dafür ist, dass ich auch online eine veraltete Version davon habe, die derzeit höher eingestuft ist wegen der Sterne.
Fabian Zeindl
Hallo Fabian, ist es möglich, dass der Standardstil automatisch auf bestimmte Elemente angewendet wird, z. B. Text? Können Sie ein Beispiel dafür geben? Ich glaube nicht, dass das OP style = für jedes Element angeben wollte, aber es scheint, dass sie sich damit zufrieden gegeben haben.
Michael Ribbons
Nicht mit meiner Bibliothek, nein.
Fabian Zeindl
2

Alle diese Methoden beantworten die Frage direkt, aber für mich ist dies nicht die Möglichkeit, dies in einem komponentenbasierten Designsystem wie React zu tun.

Wir können mit atomaren Komponenten beginnen und sie dann ganz nach oben schichten und gruppieren. Der folgende Artikel könnte diesen Gedankengang klarer machen: http://atomicdesign.bradfrost.com/chapter-2/

In der natürlichen Welt verbinden sich atomare Elemente zu Molekülen. Diese Moleküle können sich weiter verbinden, um relativ komplexe Organismen zu bilden.

Wenn Sie eine Basiskomponente benötigen, die nicht vorhanden ist, erstellen Sie diese. Dann können Sie damit andere, weniger spezifische Komponenten erstellen. zum Beispiel:

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

Dann CustomTextüberall verwenden statt Text. Sie können es auch tun , mit View, div, spanoder irgendetwas anderes.

ThaJay
quelle
@TheJay das ist für einzelne Komponenten absolut sinnvoll, aber wie würden Sie den Stil auf alle Bildschirme anwenden? So etwas wie asp.net-Masterseiten: quanzhanketang.com/aspnet/aspnet_masterpages.html
mxmissile
Hast du den letzten Satz gelesen? Es ist so einfach wie zu ersetzen <Text />mit <CustomText />überall. Sie können CustomText sogar als Text importieren, sodass Sie nur den Import ersetzen müssen.
ThaJay
0

Externe CSS-Datei main.css

'use strict';

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

module.exports = StyleSheet.create({

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

Instanz der CSS-Datei in der Komponente erstellen.

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

<View style={mainCss.main}><Text>Hello</Text></View>
Harpreet Cheema
quelle
Doppelte Antwort stackoverflow.com/a/30858201/5243543
ThaJay
0

Hier finden Sie eine elegante Möglichkeit, Ihre Stile zu sortieren und dann in die verschiedenen Komponenten zu importieren. Sie können einen Ordner erstellen, in dem Sie alle Stildateien zusammenstellen und eine Datei index.js erstellen, die als Fassade fungieren soll:

Die index.js sieht folgendermaßen aus:

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

export { Variables, GlobalStyles };

und dann so importieren:

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

Hier für weitere Informationen:

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

Jose Rojas
quelle
-3

Schauen Sie sich Shoutem-Themen für React Native an.

Folgendes erhalten Sie mit Shoutem Theme:

Globaler Stil, bei dem ein bestimmter Stil automatisch anhand seines Stilnamens auf die Komponente angewendet wird:

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

Aktivieren eines bestimmten komponentenspezifischen Stils mit styleName(wie CSS-Klasse):

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

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

Automatische Stilvererbung:

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>

Verschachtelter Stil für zusammengesetzte Komponenten:

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

Damit es funktioniert, müssen Sie StyleProviderdie Wrapper-Komponente verwenden , die allen anderen Komponenten über den Kontext Stil verleiht. Ähnlich wie bei Redux StoreProvider.

Außerdem müssen Sie Ihre Komponente mit dem Stil verbinden, connectStyledamit Sie immer die verbundene Komponente verwenden. Ähnlich wie bei Redux connect.

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

Sie können das Beispiel in der Dokumentation sehen.

Als letztes haben wir in unserem UI ToolKit eine Reihe von Komponenten bereitgestellt, die bereits mit dem Stil verbunden sind, sodass Sie sie einfach importieren und in Ihrem globalen Stil / Thema stylen können.

Herr Br
quelle