web-dev-qa-db-fra.com

Passer des accessoires dans une feuille de style externe dans React Native?

Je suis nouveau sur React et React Native. Pour le moment, pour chaque composant, je décompose le code en 2 fichiers distincts:

  1. index.js pour tout le code React, et;
  2. styles.js pour la feuille de style

Existe-t-il un moyen de passer des accessoires dans la feuille de style externe?

Exemple: index.js:

render() {
  const iconColor = this.props.color || '#000';
  const iconSize = this.props.size || 25;

  return (
    <Icon style={styles.icon} />
  );
}

Exemple styles.js:

const styles = StyleSheet.create({
  icon : {
    color: iconColor,
    fontSize: iconSize
  }
});

Le code ci-dessus ne fonctionne pas, mais il est plus là juste pour faire comprendre ce que j'essaie de faire. Toute aide est très appréciée!

javascriptreactjsreact-nativereact-jsxjsx
12
chapeljuice

Créez une classe qui prend iconColor et iconSize comme arguments et renvoie un objet StyleSheet

// styles.js

export default class StyleSheetFactory {
    static getSheet(iconSize, iconColor) {
        return StyleSheet.create({
            icon : {
                color: iconColor,
                fontSize: iconSize
            }
        })
    }
}

// index.js

render() {
    let myStyleSheet = StyleSheetFactory.getSheet(64, 'red')
}
7
FuzzyTree

Je préfère avoir mes styles dans un fichier styles.js séparé. À l'intérieur de styles.js:

export const styles = (props) => StyleSheet.create({
        icon : {
        color: props.iconColor,
        fontSize: props.iconSize
      }
    }

Dans votre classe principale, vous pouvez transmettre la valeur

return (
    <Icon style={styles(this.props).icon} />
  );

Alternativement, vous pouvez directement ces valeurs de sorte qu'il serait

export const styles = (iconColor,iconSize) => StyleSheet.create({
    icon : {
    color: iconColor,
    fontSize: iconSize
  }
}

et à l'intérieur de votre classe principale

return (
    <Icon style={styles(this.props,iconColor, 
this.props.iconSize).icon} />
 );
8
Kevin