如何更改单个视图的颜色

Question

您好我想知道如何更改每个视图的各个颜色。我希望颜色更改遵循特定的顺序，所以我在考虑使用Animate API，但我不想＆＃39;知道从那里去哪里。有任何想法吗？提前致谢。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  TouchableOpacity,
  Text,
  Animated,
  Easing,
  StatusBar 

} from 'react-native';
var Overlay = require('react-native-overlay');

export default class Shift extends Component {

  render() {

return (

  <View style={{flex:1}}>
  <StatusBar hidden= {true}/>

    <View style={styles.colorContainer}>
        <View style={styles.bar0}></View>
        <View style={styles.bar1}></View>
        <View style={styles.bar2}></View>
        <View style={styles.bar3}></View>
        <View style={styles.bar4}></View>
        <View style={styles.bar5}></View>
        <View style={styles.bar6}></View>
    </View>
    <Text style={styles.shift}> Shift </Text> 
     <TouchableOpacity style={styles.startButton}> 
      <Text style={styles.buttonText}> Start </Text> 
      </TouchableOpacity>

  </View>





);
  }
}

const styles = StyleSheet.create({
  colorContainer: {
    flexDirection:'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  bar0 :{
    backgroundColor: '#000000',
    height: 670,
    width: 55
  },
  bar1 :{
    backgroundColor: '#0400ff',
    height: 670,
    width: 55
  },
  bar2 :{
    backgroundColor: '#04ff00',
    height: 670,
    width: 55
   },
  bar3 :{
    backgroundColor: '#00ffed',
    height: 670,
    width: 55
  },
  bar4 :{
    backgroundColor: '#ff0000',
    height: 670,
    width: 55
  },
  bar5 :{
    backgroundColor: '#ff00ff',
    height: 670,
    width: 55
  },
  bar6 :{
    backgroundColor: '#ffee00',
    height: 670,
    width: 55
  },
  startButton:{
    backgroundColor:'#000000',
    position:'absolute',
    marginLeft: 163,
    marginTop: 400,
    height:25,
    width: 105

  },
  buttonText:{
    color:'#FFFFFF',
    textAlign: "center",
    paddingBottom: 20,
    paddingRight: 6,
    paddingLeft: 5,
    fontFamily: 'Courier',
    fontSize: 30

  },
  shift:{
      marginTop: 100,
      marginLeft: 130,
      position: 'absolute',
      color: '#FFFFFF',
      backgroundColor:'transparent',
      fontSize: 60

  }


});

AppRegistry.registerComponent('Shift', () => Shift);