React Native组件点击按钮无法切换方块颜色问题及学习练习咨询

你当前的代码逻辑本身可以正常触发state更新，看起来点击无变化的核心原因有两点：

• 随机数值范围仅为0-99，灰度值跨度太小，相邻数值的色彩差异人眼很难感知，多次随机落到相近区间时就会看起来完全没变化
• 三个rgb通道共用同一个数值，生成的都是低跨度的灰度色，视觉变化感知度更低

下面的代码调整为随机生成0-255区间的rgb三通道独立数值，彩色效果变化非常明显：

import React, { useState } from "react";
import { View, StyleSheet, Button } from "react-native";

const ColorScreen = () => {
  const [rgb, setRgb] = useState([0, 0, 0]);

  const changeColorHandler = () => {
    const randomR = Math.floor(Math.random() * 256);
    const randomG = Math.floor(Math.random() * 256);
    const randomB = Math.floor(Math.random() * 256);
    setRgb([randomR, randomG, randomB]);
  };

  return (
    <View>
      <Button onPress={changeColorHandler} title="切换随机颜色" />
      <View
        style={{
          height: 100,
          width: 100,
          backgroundColor: `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`,
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({});

export default ColorScreen;

• 计数器：实现点击加减按钮修改数字，限制数字的最小/最大值，额外增加重置按钮功能
• 待办清单：实现新增待办、删除待办、标记待办完成/未完成的基础功能
• 配色生成器：在现有颜色方块的基础上扩展，支持生成单色调、互补色、渐变色方案，可复制生成的色值
• 图片列表：实现下拉刷新、上拉加载更多的图片流列表，点击图片可放大查看
• 表单验证：实现用户注册表单，对手机号、密码长度、两次密码一致性做实时校验，错误信息实时提示
• 倒计时器：支持自定义倒计时时长，实现启动/暂停/重置功能，倒计时结束后给出提示

内容的提问来源于stack exchange，提问作者Rohan