有没有办法使用下面的代码使按钮的颜色随机？

Question

我目前正在做一个 React Native 项目，点击一个按钮，按钮的颜色就会改变。我被要求从一张 144 像素的图像中复制代码。图像质量不是最好的。这是代码：

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 = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    this.setState({button: color})
  };
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text style={{ marginTop: 50, marginLeft: 170 }}>
          {this.state.counter}
        </Text>
        <Button
          title="By clicking on this button, the color of this button will change. Try it!"
          style={{ color: this.state.buttonColor }}
          onPress={this.incrimentCounter}></Button>
      </View>
    );
  }
}

我创建了一个名为 changeColor 的函数，其中我创建了不同的变量，例如 letters 和 color。我必须随机生成一个十六进制数，例如 #191970。当按钮被点击时，按钮的颜色会随着生成的随机颜色发生变化。

但是，代码不起作用。

参考代码：

https://snack.expo.io/@therealsneh/random-color-button

谢谢！

Answer 1

您只需在按下按钮时调用 changeColor 方法即可。所以相反，如果这个

onPress={this.incrimentCounter}

你需要这样做

onPress={() => {
this.incrimentCounter();
this.changeColor();
}}

顺便说一下，在 changeColor 方法中，您使用的是 this.setState({button: color})，但在设置按钮样式时使用的是 this.state.buttonColor。这应该是 this.state.button 或 this.setState({buttonColor: color})

还有一点，如果你使用的是react-native的Button，你应该给color作为prop，而不是这样的style

  <Button
          title="Click"
          color={this.state.buttonColor}

此外，您的代码中还有一个错误。字母长度为 15，您的随机化方法可以是 15。字母 [15] 将 return 未定义。要么给字母加F，要么把16改成15.

Answer 2

试试这个代码：

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 });
    var letters = '0123456789ABCDE';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    this.setState({buttonColor: color})
  };
  componentDidUpdate() {
    console.log('Counter value has changed');
  }
  
  
  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.incrimentCounter}></Button>
      </View>
    );
  }
}

有没有办法使用下面的代码使按钮的颜色随机？

Is there a way to make a button's color random using the code below?

javascript

button

react-native

expo