Reagieren Sie auf native globale Stile

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?

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>

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'

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

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',
    ...
  }
});

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

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.

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.

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>

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

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.