React Native 动态改变 View 的背景颜色

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

Answer 2

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

Answer 3

当你只是想改变系列按钮样式的改变。 （例如标签栏按钮，一个按钮选择其他不选择） 只需使用条件样式

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