it-swarm.com.de

Natives externes Stylesheet reagieren

Gibt es in React Native eine Möglichkeit, alle meine Stile in einer einzigen Datei zusammenzufassen, so dass sie (aus meiner Perspektive) problemlos verwaltet werden kann. Wie in HTML haben wir eine .css-Datei. 

Und ich habe auch ein Modul, in dem es verschiedene Stile gibt, die auf einem aktuellen Benutzer basieren.

15
Sydney Loteria

Sie können ganz einfach eine Stilkomponente mit all Ihren Stilen erstellen ...

import { StyleSheet } from "react-native"

export default StyleSheet.create({
   ...
})

Dann brauchen Sie für jede Ansicht, die Stile benötigt, einfach ...

import styles from "./Styles"
20
Chris Geirman

Nach ECMAScript 6 wäre der korrekte Export Ihrer Stile so.

style.js

import React, {StyleSheet} from 'react-native'

export default StyleSheet.create({

container: {
    flex: 1,
    marginTop: 20
},
welcome: {
    textAlign: 'center'
}
});

Dann können Sie diese in Ihrer JS-Hauptdatei importieren.

import styles from './style'
9

Sie können dieses Modul zu Ihrer Pipeline hinzufügen und eine Gulp- oder Webpack-Aufgabe erstellen, um das CSS in JavaScript zu verschieben.

https://github.com/sabeurthabti/react-native-css

Meiner Erfahrung nach ist es am besten, dass Sie nicht dasselbe CSS für das Web verwenden und nativ reagieren, da die Stylesheets von React Native nicht wirklich kaskadieren.


Wenn Sie Ihre Pipeline ein wenig ändern möchten, können Sie PostCSS, einen CSS4-zu-CSS3-Transpiler, der alle Funktionen von SASS unterstützt, auch zum Transpilieren von CSS zu JavaScript verwenden

https://github.com/postcss/postcss-js

3
Rollo

Ja, du kannst 

  • Erstellen Sie zunächst einen Dateinamen style.js und erstellen Sie den gewünschten Stil Wie im folgenden Beispiel:

Style.js

module.exports = {

    "centerRowAligment":{
        flex: 1,
        backgroundColor:"#a22a5f",
        flexDirection: 'row',
        alignItems:"center"
    },
    "centerColumnAligment":{
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center'
    }

}

Dann importieren Sie es einfach in Ihre Reaktionsdatei 

import styles from './style'

Und dann in den Render-Komponenten verwenden 

   <View style={styles.centerRowAligment}></View>

Das sollte gut funktionieren! 

3
Hussam Kurd

Das funktioniert für mich bei der neuesten Reaktion:

Ich habe mein Stylesheet namens CoolTextStyle.js (das sich im selben Verzeichnis wie meine index.ios.js befindet). Und es stellt sich heraus, dass Sie nicht einmal die 'StyleSheet'-Klasse benötigen

module.exports = 
{
  borderRadius:5
}); 

Dann in index.ios.js

import React, { Component, PropTypes } from 'react';
import { View, Text, TextInput,TouchableHighlight,StatusBar } from 'react-native';

var cool_text_style = require('./CoolTextStyle');

export default class delme extends Component 
{
  render() 
  {
    return (
  <View>
    <StatusBar hidden={true} />
    <Text>Login</Text>
    <TextInput placeHolder='UserName' style={cool_text_style}></TextInput>
  </View>
)
  }
}


AppRegistry.registerComponent('delme', () => delme);
2
user1709076

Sie können mein Projekt rn-less ausprobieren.

Es isoliert Ihr Stylesheet von Ihren jsx/js-Dateien mit less.js.

Und ich habe eine VS-Code-Erweiterung , mit der Sie problemlos zwischen .less-Dateien und .js/.jsx-Dateien wechseln können.

 enter image description here

2
blackmiaool

Ich stimme der @ Chris Geirman-Lösung zu. Sie können StylesSheet wie oben erwähnt von Chris erstellen und in jede Ansicht importieren. Wenn Sie das externe styleSheet mit Ihrem individuellen Ansichts-/Komponenten-Stylesheet zusammenführen möchten, können Sie das neue ES6-Feature Object.assign wie folgt verwenden:

stile = Anfordern ('./StyleSheet');

const viewStyle = Object.assign (Styles, StyleSheet.create ({ ...}); );

2
avatarfreak

Der gesamte Prozess der Definition von Stilen in meinem JavaScript hat mich sehr verwirrt, als ich zum ersten Mal von Ionic zu React Native wechselte.

Zunächst müssen Sie verstehen, dass React NativeNICHTnur eine Anwendung ist, die in einer nativen WebView ausgeführt wird. Anstatt divs und div zu rendern, werden in JavaScript tatsächlich plattformspezifische Komponenten auf höherer Ebene erstellt.

Daher können wir nicht dieselben Stilregeln (über externe .css-Stylesheets) anwenden wie eine Hybridanwendung, die mit einem anderen Framework wie Ionic geschrieben wurde. Nun, sowieso nicht ganz (siehe unten).

Beide oben genannten Optionen sind gültige Lösungen. Mit:

  • Separate JavaScript-Dateien, um Ihre Stile modularer zu gestalten; und
  • Verwenden von Bibliotheken zum Transpilieren von CSS, um native StyleSheet-Objekte zu reagieren.

Hinweis zu letzterer Option: Bibliotheken wie postcss-js ermöglichen es Ihnen nicht, CSS wie üblich zu verwenden, d. Styles müssen immer noch über Requisiten an Komponenten weitergegeben werden.

1
Toby Flemming