映射数组时更改状态栏颜色

Question

我正在尝试在已映射的元素上滑动时更改状态栏的颜色，但是它仅将其设置为地图中的最后一种颜色，之后我再次滑动时它不会改变

  return (

        <ImageBackground  source={item.image} style={{width: '100%', height: '100%'}} >
        <StatusBar
        backgroundColor={item.color}
           animated/>
        </ImageBackground>

      );

这是数组

const slides = [
  {
    key: 'somethun',
    title: 'Title 1',
    text: 'Description.\nSay something cool',
    image: require('../images/1.png'),
    backgroundColor: '#59b2ab',
    color:'#0099cb'
  },
  {
    key: 'somethun-dos',
    title: 'Title 2',
    text: 'Other cool stuff',
    image: require('../images/2.png'),
      backgroundColor: '#febe29',
    color:'#F15050'
  },
  {
    key: 'somethun1',
    title: 'Rocket guy',
    text: 'I\'m already out of descriptions\n\nLorem ipdsfdsfdsfdsf\nsdfsdf\nsdndssum bla bla bla',
    image: require('../images/3.png'),
    backgroundColor: '#22bcb5',
    color:'#0099cb'
  },
  {
    key: 'somethun12',
    title: 'Rocket guy',
    text: 'I\'m already out of descriptions\n\nLorem ipdsfdsfdsfdsf\nsdfsdf\nsdndssum bla bla bla',
    image: require('../images/4.png'),
    backgroundColor: '#22bcb5',
    color:'#F15050'
  }
];

状态栏颜色始终为＃F15050