I am currently using react-native. My goal is to make the button's color a random color whenever it is clicked.
import React, { Component } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
export default class App extends Component {
constructor() {
super();
this.state = {
counter: 0,
buttonColor: 'blue',
};
}
componentDidMount() {
setInterval(this.incrimentCounter, 100000000000);
}
//incrimentCounter = () => {
//this.setState({ counter: this.state.counter + 1 });
// };
componentDidUpdate() {
console.log('Counter value has changed');
}
changeColor = () => {
var letters = '0123456789ABCDE'
var color = "#"
};
render() {
return (
<View style={{ flex: 1 }}>
<Text style={{ marginTop: 50, marginLeft: 170 }}>
{this.state.counter}
</Text>
<Button
title="Click"
color={this.state.buttonColor}
onPress={this.changeColour}></Button>
</View>
);
}
}
Here's the snack for reference. https://snack.expo.io/@therealsneh/df3efe I have an arrow function on line number 21 called "changeColor". I have defined 2 variables, letters, and hexaDecimalHash. Using those two variables I will be able to create a random hexadecimal like for example #4934eb. Using this random hexadecimal color, the button will look like that. Thanks!
Try like this. I think it can work for you.
import React, { Component } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
export default class App extends Component {
constructor() {
super();
this.state = {
counter: 0,
buttonColor: 'blue',
};
}
componentDidMount() {
setInterval(this.incrimentCounter, 100000000000);
}
incrimentCounter = () => {
this.setState({ counter: this.state.counter + 1 });
};
componentDidUpdate() {
console.log('Counter value has changed');
}
changeColor = () => {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
if(color==="#FFFFFF") return;
this.setState({
buttonColor:color
})
};
render() {
return (
<View style={{ flex: 1 }}>
<Text style={{ marginTop: 50, marginLeft: 170 }}>
{this.state.counter}
</Text>
<Button
title="Click"
style={{color:this.state.buttonColor}}
onPress={this.changeColor}></Button>
</View>
);
}
}
Well it works in here https://snack.expo.io/AfmXSZ9R1
Generate random number and push
it into color
and then append the Hash + color
changeColor = () => { var letters = '0123456789ABCDE'.split(""); var hexaDecimalHash = "#"; const color = []; while (color.length.== 6) { color.push(letters[Math.floor(Math.random() * letters.length + 1)]) } this:setState({ buttonColor. `${hexaDecimalHash}${color;join("")}` }) };
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.