Реагировать на собственный набор стилей как государство - PullRequest
Новая
       10

Реагировать на собственный набор стилей как государство

3 голосов
/ 18 января 2020

Я хочу использовать backgroundColor из style1 в качестве состояния и изменить его в функции change().
Как получить доступ к style1?

Моя цель - вызвать функцию change из другой функции, заставив кнопку изменить цвет на желтый, а затем через некоторое время снова изменить цвет на синий. 

export default class App extends Component{ 
  constructor (props){
    super(props);
    this.state = {
      //style1.backgroundColour: blue  //? Can't 
    }
    this.change=this.change.bind(this)
  }

  change() {
    this.setState({ style1.backgroundColour: yellow }) //?
  }

  render(){
    return (
      <View style={styles.style1} > </View>

    );
  }
}

const styles = StyleSheet.create({

  style1:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160,    
    backgroundColor:'blue',
  },

});

1 Ответ

0 голосов
/ 18 января 2020

Вы можете присвоить массив стилевому тегу. Таким образом, вы можете задать любые другие стили из других источников.

Сначала вы должны объявить значение по умолчанию для вашего состояния backgroundColor: 

this.state = {
    backgroundColor: 'blue'
}

, а затем установить состояние в функции как обычное состояние строки: 

this.setState({backgroundColor: 'yellow'});

и, наконец, используйте его в теге стиля: 

style={[styles.style1, {backgroundColor: this.state.backgroundColor}]}



Если вы хотите использовать объект вместо обычного состояния строки: 

export default class App extends Component{ 
  constructor (props){
    super(props);
    this.state = {
      style1: {
        backgroundColor: 'blue'
      }
    }
    this.change=this.change.bind(this)
  }

  change() {
    this.setState({ style1: {...this.state.style1, backgroundColor: 'yellow' } })
  }

  render(){
    return (
      <View style={[styles.style1, this.state.style1]}> </View>

    );
  }
}

const styles = StyleSheet.create({

  style1:{
    padding: 5,
    height: 80,
    width: 80,  
    borderRadius:160,    
    backgroundColor:'blue',
  },

});
...