React Native动态更改视图的背景颜色

Question

我正在尝试创建一个应用程序,每次点击屏幕时背景颜色都会改变.我有点击事件工作,但我不知道如何更改背景颜色.

这是我现在的代码:

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

我想在每次点击屏幕时重新生成背景.

Answer 1

您可以使用更改背景颜色 this.setState

设置初始背景颜色 constructor

this.state = {
    backgroundColor: randomHex()
}

在你的render功能中改变你的风格道具:

[styles.container, {backgroundColor: this.state.backgroundColor}] 

并onClick添加

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