React Native Cambia dinámicamente el color de fondo de la vista

Presta atención ya que en esta reseña hallarás la respuesta que buscas.Esta noticia ha sido aprobado por nuestros especialistas para garantizar la calidad y veracidad de nuestro post.

Solución:

Puede cambiar el color de fondo usando this.setState

Establezca el color de fondo inicial en su constructor

this.state = 
    backgroundColor: randomHex()

en tus render la función cambia tu accesorio de estilo a:

[styles.container, backgroundColor: this.state.backgroundColor] 

y onClick agregar

this.setState(backgroundColor: randomHex());

Aquí está el código completo

import React,  Component  from "react";
import 
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
 from "react-native";

let randomHex = () => 
    let letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) 
        color += letters[Math.floor(Math.random() * 16)];
    
    return color;
;

export default class randomBackground extends Component 
    constructor(props) 
        super(props);

        this.onClick = this.onClick.bind(this);

        this.state = 
            backgroundColor: randomHex(),
        ;
    

    onClick() 
        console.log("clicked ");
        this.setState( backgroundColor: randomHex() );
    

    render() 
        return (
            
                
                    Tap to change the background
                
            
        );
    


const styles = StyleSheet.create(
    container: 
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: randomHex(),
    ,
    instructions: 
        color: "white",
    ,
);

AppRegistry.registerComponent("randomBackground", () => randomBackground);

import 
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight
 from 'react-native';



export default class randomBackground extends Component 

    state=
      currentColor:"#FFFFF"
    

    onClick() 
      let letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++ ) 
         color += letters[Math.floor(Math.random() * 16)];
      
      this.setState(currentColor:color)
    
    render() 
        return (
            
                
                    
                        Tap to change the background
                    
                
            
        );
    

const styles = StyleSheet.create(
    container: 
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    ,
    instructions: 
        color: "white"
    
);
AppRegistry.registerComponent('randomBackground', () => randomBackground);

Cuando simplemente desea cambiar la serie de cambios de estilo de botón. (ejemplo de botones de la barra de pestañas, un botón seleccionado otros no) simplemente use estilos condicionales

style=[this.state.yourstate ? styles.selectedButtonStyle : styles.normalButtonStyle]

Si guardas alguna sospecha o forma de renovar nuestro tutorial eres capaz de escribir una acotación y con deseo lo ojearemos.

---

---

Utiliza Nuestro Buscador