Comment passer des accessoires de style pour un composant spécifique dans React-Native

Question

J'ai essayé de créer un bouton avec des styles spécifiques pour son. J'avais plus de 3 propriétés comme justificationContenu, alignItems, backgroundColor et hauteur. Je voulais passer un style d'un autre composant à ceci, afin que la propriété backgroundColor du bouton change.

Mon code:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ buttonName, csCode }) => {
  const { buttonStyle, textStyle } = styles;

  return (
    <TouchableOpacity style={{ buttonStyle, backgroundColor: [csCode] }}>
      <Text style={textStyle}>
      {buttonName}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#ffffff',
    fontSize: 35,
    fontWeight: '600',

  },
  buttonStyle: {
    justifyContent: 'center',
    alignSelf: 'stretch',
    height: '20%',
  }
};

export { Button };

Ici, le buttonStyle n'est pas appliqué aux boutons, mais uniquement l'hélice backgroundColor est uniquement appliquée. De l'aide ?

Merci.

Answer 1

Si vous souhaitez utiliser ensemble des styles de l'objet styles et des styles en ligne, veuillez les mettre dans un tableau comme celui-ci:

<TouchableOpacity style={[buttonStyle, {backgroundColor: csCode }]}>
  ...
</TouchableOpacity>