React Native中ExpenseContext无法在目标页面生效报错如何解决

问题原因&解决方案 #

1. 报错直接原因：组件名拼写错误

React Native 官方提供的列表组件名为FlatList（首字母F和L均为大写），你在ExpenseScreen中导入和使用时都写成了小写L的Flatlist，导致导入的组件值为undefined，触发你看到的类型错误。
修改方案：将ExpenseScreen的相关代码调整即可：

// 导入时修改为大写L的FlatList
import { Text, StyleSheet, View, Button, FlatList } from "react-native";

// 使用处也对应修改
<FlatList
  data={expensePosts}
  keyExtractor={(expensePost) => expensePost.title}
  renderItem={({item}) => {
    return <Text>{item.title}</Text>
  }}
/>

2. Context作用域问题解答

你当前的ExpenseProvider包裹了整个导航容器组件，所有注册在导航栈内的页面（HomeScreen、ExpenseScreen、BalanceScreen）都在Provider的作用域内，都可以正常访问Context值，不会仅对HomeScreen生效，这部分配置没有问题。

内容的提问来源于stack exchange，提问作者Adrien M