Reagieren Einheitlichen globalen Stilen

Ich bin neu mit Reagieren und ich verstehe die Vorteile der Komponenten-basierten, inline-styles. Aber ich Frage mich, ob es ist eine gute Weg, um irgendeine Art von globalen Stil. Beispielsweise würde ich gerne mit dem gleichen Text-und Button-Färbung im Laufe meiner app.

Eher als Wiederholung in jeder Komponente(und anschließend zu ändern in x Orten, wenn es sein muss), mein Erster Gedanke ist die Schaffung eines 'Basis' StyleSheet-Klasse in eine eigene Datei und importieren Sie es in meinen Komponenten.

Gibt es eine bessere oder mehr 'Reagieren' Weg?

InformationsquelleAutor Patm | 2015-06-15

react-native

109

Können Sie erstellen Sie eine wiederverwendbare stylesheet. 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 der Komponente:
```
var s = require('./style');
```
...dann:
```
<View style={s.alwaysred} ></View>
```
- Ja, das ist das, was ich beschrieben habe. Danke für die Bestätigung, dass ich hatte die richtige Idee. Wird die Markierung als richtige Antwort für heute.
- Jetzt können Sie nur verwenden import { StyleSheet } from 'react-native';
- Ich habe einer Antwort zu erklären, einen anderen Weg, um in der Globalen Stil, haben Sie möglicherweise möchten, werfen Sie einen Blick stackoverflow.com/questions/30853178/react-native-global-styles/.... Es ist weit mehr flexibel und Reagieren Geist, weil es vermeidet statische definition.
InformationsquelleAutor boredgames
68

Erstellen Sie eine Datei für Ihre Arten (I. E., Style.js).

Hier ist ein Beispiel:
```
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1
  },
  welcome: {
    fontSize: 20
  }
});
```
In einer der Dateien, die Sie verwenden möchten, Ihr Stil, fügen Sie den folgenden:
```
import styles from './Style'
```
- Ich vermute, diese Antwort ist relevanter!
- './Stile "sein sollte". /Stil' für den Abgleich der Dateinamen Style.js
- guten Fang. Ich habe aktualisiert die Antwort
InformationsquelleAutor Barlow Tucker

Wenn Sie nur wollte, um einige Globale Variablen, die Sie könnten 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
    }
});

Brauchen nicht die Einfuhr in AppStyles.js aber das ist perfekt, wenn Sie wollen einfach nur einige einfache Globale styling Variablen!

InformationsquelleAutor Rob

Können Sie auch versuchen,reagieren-native-extended-stylesheet, dass die globalen styling-Variablen:

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

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

Arbeiten wie ein Charme 😉

InformationsquelleAutor vitalets

Müssen Sie eine Datei erstellen, die zum speichern aller Stil in es wie "styles.js " und schreiben Sie den css-Typ-code, wie Sie benötigen

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

InformationsquelleAutor Amintabar

3

Versuchen meine Bibliothek reagieren-native-Stil-Tachyonen, die bietet Ihnen nicht nur Globale Stile, sondern ein design-first, responsive Layout-system, mit breiten und Höhen relativ zum root fontsize.
- Das ist interessant! Auf den ersten Blick, es sah komisch, aber wenn ich daran denke, und betrachten Sie die weniger code müsste ich schreiben, es scheint ziemlich gut.
- Ich bin froh, dass es für Sie arbeitet. Du wirst lernen Sie zu schätzen, den Abstand Maßstab besonders. Fühlen Sie sich frei zu erreichen, wenn Sie Unterstützung benötigen.
- Ich würde gerne, wenn Sie könnten star mein Paket auf NPM: npmjs.com/package/react-native-style-tachyons, der Grund dafür ist, dass ich eine veraltete version online zu, dass ist derzeit höher eingestuft, denn von den Sternen.
- Hallo Fabian, ist es möglich, die Standard-Formatvorlage automatisch für bestimmte Elemente, Text sagen? Können Sie uns ein Beispiel dafür? Ich glaube nicht, dass der OP festlegen wollte, style= für jedes element, aber es scheint, dass Sie sich für dieses.
- Nicht mit meiner Bibliothek, Nr.
InformationsquelleAutor Fabian Zeindl

Externe CSS-Datei main.css

'use strict';

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

module.exports = StyleSheet.create({

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

erstellen Sie eine Instanz der css-Datei der Komponente.

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

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

InformationsquelleAutor harpreet cheema

1

Alle diese Methoden, die direkt die Frage beantworten, aber es ist nicht der Weg, es zu tun. Diese Menschen stecken in der alten Weise zu denken, wo Sie im Stil der verfügbaren Elemente. In Reagieren, Sie machen Komponenten. Also, wenn Sie brauchen eine Basis-Komponente, die nicht vorhanden ist, machen Sie es. zum Beispiel:
```
function getStyle (styleProp) {
  return {
    color   : getTheme().text,
    fontSize: 14,
    ...styleProp
  }
}

export default function CustomText (props) {
  return (
    <Text style={getStyle(props.style)}>
      {props.children}
    </Text>
  )
}
```
und verwenden Sie dann CustomText überall statt Text. Sie können es auch tun, mit View, div, span oder irgendetwas anderes.

InformationsquelleAutor ThaJay

-2

Werfen Sie einen Blick auf Shoutem Themen für Reagieren Nativen.

Hier ist, was Sie erhalten mit Shoutem Thema:

Globalen Stil, wo bestimmte Stil wird automatisch angewendet, um die Komponente durch Ihre style-name:

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

Aktivierung bestimmter Komponenten bestimmte Stil 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 Stil-Vererbung:

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>

Verschachteltes Format für Komponenten zusammengesetzt:

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

Um es zu bekommen Arbeit, die Sie verwenden müssen StyleProvider, die wrapper-Komponente, die bietet Stil auf alle anderen Komponenten durch Kontext. Ähnlich Redux StoreProvider.

Außerdem müssen Sie Ihre Komponente Stil mit connectStyle so immer die angeschlossene Komponente. Ähnlich Redux connect.

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

Können Sie die siehe Beispiel in der Dokumentation.

Eine Letzte Sache, wir haben auch Satz von Komponenten in unsere UI-ToolKit, die bereits angeschlossen sind, um Stil, so können Sie einfach importieren Sie und Stil in Ihre Globale style/theme.

InformationsquelleAutor Mr Br

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.