Javascript React Native，onPress 无法处理从 fontAwesome 导入的图标

我正在开发我的第一个React原生应用程序，需要使用fontAwesome作为明星图标.我需要使用onPress函数来更新highlight变量并更改恒星的 colored颜色 .但当我试着在expo 上运行它并按下一颗星星时，什么都没发生，变量保持不变.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, FlatList, Image, Button } from 'react-native';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faStar } from '@fortawesome/free-solid-svg-icons'
import React, {useState, useEffect} from 'react'

export default function Detail(props) {
  const movie = props.navigation.getParam('movie', null) 
  const [ highlight, setHeighlight] = useState(0)

  const rateclicked = () => {
      console.log(highlight);
  }


  return (
    <View style={styles.container}>

        <View style={styles.starContainer}>
            <FontAwesomeIcon style={movie.avg_rating > 0 ? styles.orange : styles.white} icon={faStar}/>
            <FontAwesomeIcon style={movie.avg_rating > 1 ? styles.orange : styles.white} icon={faStar}/>
            <FontAwesomeIcon style={movie.avg_rating > 2 ? styles.orange : styles.white} icon={faStar}/>
            <FontAwesomeIcon style={movie.avg_rating > 3 ? styles.orange : styles.white} icon={faStar}/>
            <FontAwesomeIcon style={movie.avg_rating > 4 ? styles.orange : styles.white} icon={faStar}/>
            <Text style={styles.white}>({movie.no_of_ratings})</Text>
        </View>

        <Text style={styles.description}> {movie.description}</Text>
        <View style={{borderBottomColor: 'white', borderBottomWidth: 2}}/>
        <Text style={styles.description}>Rate it !!!</Text>

        <View style={styles.starContainer}>
            <FontAwesomeIcon style={highlight > 0 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(1)}/>
            <FontAwesomeIcon style={highlight > 1 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(2)}/>
            <FontAwesomeIcon style={highlight > 2 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(3)}/>
            <FontAwesomeIcon style={highlight > 3 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(4)}/>
            <FontAwesomeIcon style={highlight > 4 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(5)}/>
            
        </View>
        <Button title="Rate" onPress={() => rateclicked()}/>
    </View>
  );
}

Detail.navigationOptions = screenProps => ({
    title: screenProps.navigation.getParam('title'),
    headerStyle: {
        backgroundColor: 'orange',

    },
    headerTintColor: '#fff',
    headerTitleStyle: {
        fontWeight: 'bold',
        fontSize: 24,
    },
    headerRight: () => {
        <Button title="Edit" color="white"
        onPress={() => screenProps.navigation.navigate("Edit", {movie: screenProps.navigation.getParam("movie")})} />
    
    },


})

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    padding: 10,
    backgroundColor: '#282C35',
    
  },

  item: {
    flex: 1,
    padding: 10,
    height: 50,
    backgroundColor: '#282C35'

  },

  itemText: {
    color:'#ffff',
    fontSize: 24,
  },

  starContainer: {
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
  },

  orange: {
      color: 'orange',

  },

  white: {
      color: 'white',
  },

  description: {
    fontSize: 20,
    color: 'white',
    padding: 10,
  },

  purple: {
    color: 'purple'
  },

  grey: {
      color: 'grey'
  },
});

我如何解决这个问题？