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

React Native Dynamically Change View’s Background Color

提问by Hum4n01d

I'm trying to make an app where the background color changes every time you tap the screen. I have the tap event working, but the I don't know how to change the background color.

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

Here is my code right now:

这是我现在的代码：

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

I'd like to have the background regenerate every time the screen is tapped.

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

回答by David

You can change the background color by using this.setState

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

Set the initial background color in your constructor

设置初始背景颜色 constructor

this.state = {
    backgroundColor: randomHex()
}

in your renderfunction change your style prop to:

在您的render功能中，将您的样式道具更改为：

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

and onClickadd

并onClick添加

this.setState({backgroundColor: randomHex()});

Heres the full code

这是完整的代码

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

回答by Yasemin ?idem

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



export default class randomBackground extends Component {

    state={
      currentColor:"#FFFFF"
    }

    onClick() {
      let letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++ ) {
         color += letters[Math.floor(Math.random() * 16)];
      }
      this.setState({currentColor:color})
    }
    render() {
        return (
            <TouchableHighlight onPress={ this.onClick.bind(this) } {[styles.container, {backgroundColor: this.state.currentColor}]}>
                <View>
                    <Text style={styles.instructions}>
                        Tap to change the background
                    </Text>
                </View>
            </TouchableHighlight>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    instructions: {
        color: "white"
    }
});
AppRegistry.registerComponent('randomBackground', () => randomBackground);

回答by Im Batman

When you simply want to change series of button style change. (example Tab bar buttons, one button selected others not ) simply use conditional styles

当您只想更改一系列按钮样式时。（例如标签栏按钮，一个按钮选择其他按钮）只需使用条件样式

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