React使用useContext触发Invalid hook call错误无法排查求解决

你遇到的Invalid Hook Call报错是因为违反了React Hook的调用规则：Hook只能在React函数组件的顶层、或者自定义Hook的顶层调用。
你当前的写法是把customCard当作普通函数直接调用，而非作为React组件渲染，React无法识别该调用属于组件渲染流程，因此判定Hook调用位置非法，触发报错。
另外你定义的customCard首字母为小写，React默认会将小写开头的标签识别为原生DOM元素，也会导致组件渲染逻辑异常。

1. 重命名组件为大写开头，调整参数接收方式，符合React函数组件的规范：

const CustomCard = ({ item }: { item: Item }) => {
  const { theme } = useContext(ThemeContext);
  return(
     <View>
       .....
     </View>
  )
}

2. 修改FlatList的renderItem逻辑，使用JSX语法渲染组件，将item作为props传递：

<FlatList
        showsVerticalScrollIndicator={false}
        style={{padding: 8}}
        data={items}
        renderItem={({item}) => <CustomCard item={item} />}
        keyExtractor={item => item.id}
      />

之前你在其他文件中相同的useContext代码可以正常运行，是因为那些场景下你是将组件作为JSX标签渲染，符合Hook的调用规则。

内容的提问来源于stack exchange，提问作者John Doah