Javascript 响应本地动态更改视图’；背景色

我正在尝试制作一个应用程序，每次点击屏幕时背景颜色都会发生变化。我有自来水事件工作，但我不知道如何改变背景色

这是我现在的代码：

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight
} from 'react-native';

let randomHex = () => {
    let letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

export default class randomBackground extends Component {
    constructor(props) {
        super(props)

        this.onClick = this.onClick.bind(this)
    }
    onClick() {
        console.log('clicked ')
    }
    render() {
        return (
            <TouchableHighlight onPress={ this.onClick } style={styles.container}>
                <View>
                    <Text style={styles.instructions}>
                        Tap to change the background
                    </Text>
                </View>
            </TouchableHighlight>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: randomHex()
    },
    instructions: {
        color: "white"
    }
});
AppRegistry.registerComponent('randomBackground', () => randomBackground);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
可触摸高光
}从“反应本机”；
让randomHex=（）=>{
让字母='0123456789ABCDEF'；
让颜色='#'；
for（设i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
导出默认类randomBackground扩展组件{
建造师（道具）{
超级（道具）
this.onClick=this.onClick.bind（this）
}
onClick（）{
console.log（'clicked'）
}
render（）{
返回(
点击以更改背景
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：randomHex（）
},
说明：{
颜色：“白色”
}
});
AppRegistry.registerComponent（'randomBackground'，（）=>randomBackground）；

---

我希望每次点击屏幕时都能重新生成背景。

您可以使用

this.setState更改背景颜色。

在

构造函数中设置初始背景色

this.state={
背景颜色：randomHex（）
}

在
渲染功能中，将样式道具更改为：

[style.container，{backgroundColor:this.state.backgroundColor}]

和
onClick
add

this.setState（{backgroundColor:randomHex（）}）；

这是完整的代码

import React, { Component } from "react";
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableHighlight,
} from "react-native";

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

export default class randomBackground extends Component {
    constructor(props) {
        super(props);

        this.onClick = this.onClick.bind(this);

        this.state = {
            backgroundColor: randomHex(),
        };
    }

    onClick() {
        console.log("clicked ");
        this.setState({ backgroundColor: randomHex() });
    }

    render() {
        return (
            <TouchableHighlight
                onPress={this.onClick}
                style={[
                    styles.container,
                    { backgroundColor: this.state.backgroundColor },
                ]}
            >
                <View>
                    <Text style={styles.instructions}>Tap to change the background</Text>
                </View>
            </TouchableHighlight>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: randomHex(),
    },
    instructions: {
        color: "white",
    },
});

AppRegistry.registerComponent("randomBackground", () => randomBackground);

import React，{Component}来自“React”；
进口{
评估学，
样式表，
文本，
看法
触控高光，
}从“反应本族语”；
让randomHex=（）=>{
let letters=“0123456789ABCDEF”；
让color=“#””；
for（设i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
};
导出默认类randomBackground扩展组件{
建造师（道具）{
超级（道具）；
this.onClick=this.onClick.bind（this）；
此.state={
背景颜色：randomHex（），
};
}
onClick（）{
控制台日志（“单击”）；
this.setState（{backgroundColor:randomHex（）}）；
}
render（）{
返回(
点击以更改背景
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
辩护内容：“中心”，
对齐项目：“中心”，
背景颜色：randomHex（），
},
说明：{
颜色：“白色”，
},
});
AppRegistry.registerComponent（“randomBackground”，（）=>randomBackground）；
导入{
评估学，
样式表，
文本，
看法
可触摸高光
}从“反应本机”；
导出默认类randomBackground扩展组件{
陈述={
currentColor:#FFFFF”
}
onClick（）{
让字母='0123456789ABCDEF'；
让颜色='#'；
for（设i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
this.setState（{currentColor:color}）
}
render（）{
返回(
点击以更改背景
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
},
说明：{
颜色：“白色”
}
});
AppRegistry.registerComponent（'randomBackground'，（）=>randomBackground）；
当您只想更改一系列按钮样式时。（示例选项卡栏按钮，一个按钮已选定，其他按钮未选定）
只需使用条件样式

style={[this.state.yourstate ? styles.selectedButtonStyle : styles.normalButtonStyle]}

这没有任何作用…@Hum4n01d您已经尝试过这段代码。我刚刚编辑过。@Yaseminçidem对下面的问题有什么建议吗？可能想尝试不带反馈的TouchableWithoutFeedback或TouchableOpacity而不是TouchableHighlight。首先，不显示任何不透明度更改。第二，显示反馈，但性能更好。在我的例子中，由于某种原因，这会导致无限循环。唯一的区别是，我在本地基本ListItem中使用TouchableHighlight。我需要检查5个条件，然后如何使用此解决方案？你能解释一下吗。你可以使用像这样的嵌套条件
style={[this.state.firstCondition？styles.selectedButtonStyle:this.state.secondCondition？：styles.anotherstyle:styles.normalButtonStyle]}
但不确定它是如何影响渲染性能的
style={[this.state.yourstate ? styles.selectedButtonStyle : styles.normalButtonStyle]}