¿Puedo hacer estilos dinámicos en React Native?

Entiende el código correctamente previamente a adaptarlo a tu trabajo y si ttienes algo que aportar puedes decirlo en los comentarios.

Solución:

Por lo general, hago algo en la línea de:

…

jewelStyle = function(options) 
   return 
     borderRadius: 12,
     background: randomColor(),
   
 

Cada vez que se representa View, se creará una instancia de un nuevo objeto de estilo con un color aleatorio asociado. Por supuesto, esto significa que los colores cambiarán cada vez que se vuelva a renderizar el componente, lo que quizás no sea lo que desea. En su lugar, podrías hacer algo como esto:

var myColor = randomColor()

…

jewelStyle = function(myColor) 
   return 
     borderRadius: 10,
     background: myColor,
   
 

Sí, puedes y, de hecho, deberías usar StyleSheet.create para crear tus estilos.

import React,  Component  from 'react';
import 
    StyleSheet,
    Text,
    View
 from 'react-native';    

class Header extends Component 
    constructor(props)
        super(props);
        

    render() 
        const  title, style  = this.props;
        const  header, text  = defaultStyle;
        const combineStyles = StyleSheet.flatten([header, style]);    

        return (
            
                
                     title 
                
            
        );
    
    

const defaultStyle = StyleSheet.create(
    header: 
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset:  width: 0, height: 3 ,
        shadowOpacity: 0.4,
        elevation: 2,
        position: 'relative'
    ,
    text: 
        color: '#0d4220',
        fontSize: 16
    
);    

export default Header;

Y luego:

Si todavía quieres aprovechar StyleSheet.create y también tienen estilos dinámicos, prueba esto:

const Circle = (initial) => 


const initial = user.pending ? user.email[0] : user.firstName[0];

    const colorStyles = 
        backgroundColor: randomColor()
    ;

    return (
        
            initial.toUpperCase()
        
    );
;

const styles = StyleSheet.create(
    circle: 
        height: 40,
        width: 40,
        borderRadius: 30,
        overflow: 'hidden'
    ,
    text: 
        fontSize: 12,
        lineHeight: 40,
        color: '#fff',
        textAlign: 'center'
    
);

Fíjate cómo el style propiedad de la View se establece como un array que combina su hoja de estilo con sus estilos dinámicos.

Aquí puedes ver las comentarios y valoraciones de los lectores

Acuérdate de que te permitimos comentar si te fue de ayuda.

---

---

Utiliza Nuestro Buscador