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

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

SELECT user_, prev
FROM (SELECT *, ROW_NUMBER() OVER(PARTITION BY user_ ORDER BY ts) AS rn
      FROM (SELECT *, CASE 
                WHEN isnumber = 'y' THEN NULL
                WHEN LAG(isnumber,1) OVER(PARTITION BY user_ ORDER BY ts) = 'y'
                     THEN LAG(col,1) OVER(PARTITION BY user_ ORDER BY ts)
               END AS prev
             FROM tab) sub
    WHERE prev IS NOT NULL) sub2
WHERE rn = 1;

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

3 个答案: