[英]How to change background color on Button Click
i am new to react native, i have simple app.js
file我是原生反应新手,我有简单的
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;
};
in here i have a simple function randomHex
which gives a random hex color, when i refresh my app on my web the color is update but is there any way when i click the button the background color is updated with any random color在这里,我有一个简单的 function
randomHex
,它给出随机的十六进制颜色,当我在 web 上刷新我的应用程序时,颜色会更新,但是当我单击按钮时,有什么办法可以用任何随机颜色更新背景颜色
VERY SIMPLE:很简单:
function btnClick(e){
styles.container.backgroundColor=randomHex()
}
<Button title="CLick Me" onPress={btnClick} />
I think This Should Work.我认为这应该有效。 If not contact me.
如果不联系我。
I am not very good with functional components but this works:我对功能组件不是很好,但这很有效:
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;
};
There are probably better ways of doing this.可能有更好的方法来做到这一点。 But one way is to use states.
但一种方法是使用状态。 The answer above mine only runs the function "randomHex()" which returns the color, but I don't think it will change the background color.
我上面的答案只运行返回颜色的 function "randomHex()",但我认为它不会改变背景颜色。
Instead I would probably use the useState hook.相反,我可能会使用 useState 挂钩。 This will allow the component to change the background color when the state is changed.
这将允许组件在更改 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>
);
}
All I have done, is add the import for the state with React.我所做的只是使用 React 添加 state 的导入。 Then also added a state called bgColor and the function to change this value setBgColor.
然后还添加了一个名为 bgColor 的 state 和 function 来更改此值 setBgColor。 Whenever bgColor is changed, the view will change it's background color.
每当 bgColor 改变时,视图都会改变它的背景颜色。
The below code should work:下面的代码应该可以工作:
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',
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.