时间戳

首页 > 解决方案 > 如何更改按钮单击的背景颜色

javascript - 如何更改按钮单击的背景颜色

问题描述

我是新手反应原生，我有简单的app.js文件

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Button title="CLick Me"/>
      <StatusBar style="auto" />
    </View>
  );
}


var styles = {
  container: {
    flex: 1,
    backgroundColor: randomHex(),
    alignItems: 'center',
    justifyContent: 'center',
  },
}

function randomHex() {
  console.log("Func Called")
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};

在这里我有一个简单的函数randomHex，它给出一个随机的十六进制颜色，当我在我的网页上刷新我的应用程序时，颜色会更新，但是当我点击按钮时，有什么方法可以用任何随机颜色更新背景颜色

标签： javascriptreactjsreact-native

解决方案

很简单：

function btnClick(e){
   styles.container.backgroundColor=randomHex()
}
<Button title="CLick Me" onPress={btnClick} />

我认为这应该有效。如果不联系我。

推荐阅读