使用开关盒更改背景颜色

时间:2018-09-22 12:32:39

标签: javascript react-native

import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity } from 'react-native';
import AwesomeButton from 'react-native-really-awesome-button';


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

export default class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { count: 0 }

    
    this.states = {
      backgroundColor: randomHex()
  };

  }
 
  onPress = () => {
  this.setState({
   count: this.state.count+1
   
  });

}

renkDegis = (count,color) => {
 switch(count){
    case 10: color="black"; break; 
    
    case 20: b = this.randomHex(); break;
    
    default:null;
 
  } } 



  render() {
    return (
      <View style={{flex:1,alignItems: 'center',backgroundColor:this.renkDegis(this.state.count) }} >
        <Text style ={styles.textDesign}>{this.state.count}</Text>
         <TouchableOpacity 
        style={styles.btnStyle}
        onPress={this.onPress}
        >



 </TouchableOpacity>

      </View>
    );
  }
}




const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: randomHex(),
    alignItems: 'center',
  //  justifyContent: 'center',
  }

强文本 当计数分别为10、20和30时,我想更改颜色。但是我的错在哪里? 你可以编译我的代码吗?当我按十次按钮时,它会警告我。

ı创建了randomHex()并使用了它。但这给了我警告。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

1 个答案:

答案 0 :(得分:0)

您应该从renkDegis函数返回值,

样品

renkDegis = (count) => {
  let choosen;
  switch(count){
    case 10: choosen = "black"; break;
    case 20: choosen = randomHex(); break;
    default:null;
  } 
  return choosen;
}

希望这会有所帮助!