React Native中FontAwesome图标onPress事件无效问题求助

问题根源 #

1. FontAwesomeIcon不支持直接绑定触摸事件：FontAwesomeIcon是渲染SVG图标的组件，并非React Native原生可触摸组件，直接给它加onPress属性不会触发任何操作。
2. 状态更新函数拼写不一致：useState声明的状态更新函数是setHeighlight（多了一个e），和状态变量highlight拼写不一致，虽然暂时不影响功能，但容易引发后续逻辑混乱。
3. navigationOptions的headerRight存在语法问题：原代码中headerRight的箭头函数用了大括号但没有返回值，导致右上角的Edit按钮无法显示。

解决方法 #

• 用React Native的TouchableOpacity（或TouchableWithoutFeedback）包裹每个FontAwesomeIcon，将onPress绑定到可触摸组件上。
• 统一状态更新函数的拼写，保持和状态变量命名一致。
• 修正headerRight的箭头函数写法，确保返回组件。

修改后的完整代码 #

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

export default function Detail(props) {
  const movie = props.navigation.getParam('movie', null) 
  // 修正拼写：setHeighlight -> setHighlight
  const [ highlight, setHighlight] = 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}>
            {/* 用TouchableOpacity包裹图标，绑定onPress事件 */}
            <TouchableOpacity onPress={()=> setHighlight(1)}>
                <FontAwesomeIcon style={highlight > 0 ? styles.purple : styles.grey} icon={faStar} size={48}/>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=> setHighlight(2)}>
                <FontAwesomeIcon style={highlight > 1 ? styles.purple : styles.grey} icon={faStar} size={48}/>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=> setHighlight(3)}>
                <FontAwesomeIcon style={highlight > 2 ? styles.purple : styles.grey} icon={faStar} size={48}/>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=> setHighlight(4)}>
                <FontAwesomeIcon style={highlight > 3 ? styles.purple : styles.grey} icon={faStar} size={48}/>
            </TouchableOpacity>
            <TouchableOpacity onPress={()=> setHighlight(5)}>
                <FontAwesomeIcon style={highlight > 4 ? styles.purple : styles.grey} icon={faStar} size={48}/>
            </TouchableOpacity>
        </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'
  },
});

补充说明 #

• 若不需要按压时的透明度反馈，可使用TouchableWithoutFeedback替换TouchableOpacity。
• 修改后点击星星图标会正确更新highlight状态，星星颜色也会随之切换。

内容的提问来源于stack exchange，提问作者Itay Lador