Javascript 如何更改按钮单击时的背景色

我对react native很陌生，我有一个简单的

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;
};

从“世博会状态栏”导入{StatusBar}；
从“React”导入React；
从“react native”导入{按钮，视图}；
导出默认函数App（）{
返回(
);
}
变量样式={
容器：{
弹性：1，
背景颜色：randomHex（），
对齐项目：“居中”，
为内容辩护：“中心”，
},
}
函数randomHex（）{
log（“Func调用”）
let letters=“0123456789ABCDEF”；
让color=“#””；
for（设i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
};

在这里，我有一个简单的函数

randomHex

，它提供了一个随机的十六进制颜色，当我在我的网站上刷新我的应用程序时，颜色是更新的，但是当我点击按钮时，背景颜色是否会用任意的随机颜色更新非常简单：

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

功能点击（e）{
style.container.backgroundColor=randomHex（）
}

---

我认为这应该行得通。如果没有，请与我联系。

我对功能组件不是很在行，但这可以：

import { Button, View } from 'react-native';

import React from 'react';
import { StatusBar } from 'expo-status-bar';

export default class App extends Component {
    state = {
        color: randomHex()
    }
    onClick = () => {
        this.setState({ color: randomHex() })
    }
    render() {
        return (
            <View style={{ ...styles.container, backgroundColor: this.state.color }}>
                <Button onPress={this.onClick} title="CLick Me" />
                <StatusBar style="auto" />
            </View>
        );
    }
}


var styles = {
    container: {
        flex: 1,
        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;
};

从“react native”导入{按钮，视图}；
从“React”导入React；
从“博览会状态栏”导入{StatusBar}；
导出默认类应用程序扩展组件{
状态={
颜色：randomHex（）
}
onClick=（）=>{
this.setState（{color:randomHex（）}）
}
render（）{
返回(
);
}
}
变量样式={
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
},
}
函数randomHex（）{
log（“Func调用”）
let letters=“0123456789ABCDEF”；
让color=“#””；
for（设i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
};

也许有更好的方法可以做到这一点。但一种方法是使用状态。我上面的答案只运行函数“randomHex（）”返回颜色，但我认为它不会改变背景颜色

相反，我可能会使用useState钩子。这将允许组件在状态更改时更改背景色

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

export default function App() {
  const [bgColor, setBgColor] = useState(randomHex());

  var styles = {
    container: {
      flex: 1,
      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;
  }

  return (
    <View style={[styles.container, { backgroundColor: bgColor }]}>
      <Button title="Click Me" onPress={() => setBgColor(randomHex())} />
      <StatusBar style="auto" />
    </View>
  );
}

从“世博会状态栏”导入{StatusBar}；
从“React”导入React，{useState}；
从“react native”导入{按钮，视图}；
导出默认函数App（）{
const[bgColor，setBgColor]=useState（randomHex（））；
变量样式={
容器：{
弹性：1，
对齐项目：“中心”，
为内容辩护：“中心”
}
};
函数randomHex（）{
log（“Func调用”）；
let letters=“0123456789ABCDEF”；
让color=“#””；
for（设i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
返回(
setBgColor（randomHex（））}/>
);
}

---

我所做的就是添加状态的导入，使用React。然后还添加了一个名为bgColor的状态和用于更改此值的函数setBgColor。无论何时更改背景颜色，视图都将更改其背景颜色。

以下代码应能正常工作：

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Button
} from 'react-native';

export default function App() {
  const [color, setColor] = React.useState({
    color: '',
  });

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

  return (
    <View style={[styles.container, {backgroundColor: color.color }]}>
      <Button title='Change color' onPress={randomHex}/>
      <StatusBar style="auto" />
    </View>
  );
}

var styles = {
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
}

从“React”导入React；
进口{
安全区域视图，
样式表，
滚动视图，
看法
文本，
状态栏，
按钮
}从“反应本机”；
导出默认函数App（）{
const[color，setColor]=React.useState({
颜色：''，
});
函数randomHex（）{
log（“Func调用”）；
let letters=“0123456789ABCDEF”；
让random=“#””；
for（设i=0；i<6；i++）{
随机+=字母[Math.floor（Math.random（）*16）]；
}
赛特色({
颜色：随机，
});
log（“新颜色：+color.color”）；
};
返回(
);
}
变量样式={
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
},
}

我认为病态解决方案是正确的。谢谢，这很有效，解释也很好