web-dev-qa-db-fra.com

Réagir à la feuille de style externe native

Est-ce qu'il y a un moyen dans React Native de mettre tous mes styles dans un seul fichier afin de le maintenir facilement (de mon point de vue) comme le HTML, nous avons un fichier .css. 

Et aussi j'ai un module où il y a différents styles basés sur un utilisateur actuel.

iosreactjsreact-native
15
Sydney Loteria

Vous pouvez simplement créer un composant Styles comme avec tous vos styles ...

import { StyleSheet } from "react-native"

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

Ensuite, sur n'importe quelle vue ayant besoin de styles, il vous suffit de l'exiger ...

import styles from "./Styles"
20
Chris Geirman

Selon ECMAScript 6, la manière correcte d’exporter vos styles serait la suivante.

style.js

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

export default StyleSheet.create({

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

Ensuite, dans votre fichier JS principal, vous pouvez importer comme ceci.

import styles from './style'
9
Hashan Seneviratne

Vous pouvez ajouter ce module à votre pipeline et créer une tâche Gulp ou Webpack pour transpiler le CSS en JavaScript.

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

D'après mon expérience, il vaut mieux ne pas utiliser le même CSS pour le Web et réagir en mode natif, car les feuilles de style de React Native ne sont pas réellement mises en cascade.

Ou si vous souhaitez modifier un peu votre pipeline, PostCSS, qui est un transpiler CSS4 à CSS3, qui prend en charge toutes les fonctionnalités de SASS, peut également être utilisé pour transpiler, CSS en JavaScript

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

3
Rollo

Oui, vous pouvez 

  • Commencez par créer un nom de fichier style.js et créez le style de votre choix, comme vous le souhaitez, comme dans l'exemple suivant:

Style.js

module.exports = {

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

}

Ensuite, dans votre fichier de réaction, importez-le simplement 

import styles from './style'

Et puis l'utiliser dans les composants de rendu 

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

Cela devrait bien fonctionner! 

3
Hussam Kurd

Cela fonctionne pour moi sur le dernier React:

J'ai ma feuille de style nommée CoolTextStyle.js (qui se trouve dans le même répertoire que mon index.ios.js). Et il s'avère que vous n'avez même pas besoin de la classe 'StyleSheet'

module.exports = 
{
  borderRadius:5
});

Puis dans 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

Vous pouvez essayer mon projet rn-less .

Il isole votre feuille de style de vos fichiers jsx/js avec less.js.

Et j'ai un VS Code Extension pour cela, avec lequel vous pouvez facilement passer d'un fichier .less à un fichier .js/.jsx.

 enter image description here

2
blackmiaool

J'accepte la solution @Chris Geirman. vous pouvez simplement créer stylesSheet comme mentionné ci-dessus par Chris et l'importer dans n'importe quelle vue. Si vous souhaitez fusionner une feuille de style externe avec votre feuille de style de vue/composant, vous pouvez utiliser la nouvelle fonctionnalité ES6 Object.assign comme suit:

styles = require ('./ StyleSheet');

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

2
avatarfreak

L'ensemble du processus de définition des styles dans mon JavaScript m'a causé beaucoup de confusion lorsque je suis passé pour la première fois à React Native d'Ionic, j'espère donc que cela aidera ...

Tout d'abord, vous devez comprendre que React Native estPASsimplement une application s'exécutant dans une WebView native. Plutôt que de rendre des divs et des étendues, votre JavaScript génère des composants de niveau supérieur spécifiques à une plate-forme.

Par conséquent, nous ne pouvons pas appliquer les mêmes règles de style (via des feuilles de style .css externes) comme vous le feriez avec une application hybride écrite en utilisant un autre cadre tel que Ionic. Eh bien pas tout à fait de toute façon (voir ci-dessous).

Les deux options mentionnées ci-dessus sont des solutions valables. En utilisant:

  • Séparez les fichiers JavaScript pour rendre vos styles plus modulaires; et
  • Utilisation de bibliothèques pour transpiler CSS afin de faire réagir des objets Native StyleSheet.

Remarque sur cette dernière option: Les bibliothèques telles que postcss-js ne vous permettront pas d'utiliser votre CSS comme vous le feriez normalement avec un style basé sur des sélecteurs CSS tels que .class et #id. Les styles devront toujours être transmis aux composants via des accessoires.

1
Toby Flemming