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

Question

我是原生反应新手，我有简单的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;
};

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

Answer 1

很简单：

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

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

Answer 2

我对功能组件不是很好，但这很有效：

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

Answer 3

可能有更好的方法来做到这一点。 但一种方法是使用状态。 我上面的答案只运行返回颜色的 function "randomHex()"，但我认为它不会改变背景颜色。

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

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

我所做的只是使用 React 添加 state 的导入。 然后还添加了一个名为 bgColor 的 state 和 function 来更改此值 setBgColor。 每当 bgColor 改变时，视图都会改变它的背景颜色。

Answer 4

下面的代码应该可以工作：

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',
  },
}