React Native Context 不会跨文件和屏幕更新

Question

我正在尝试使用 Context 创建一个跨屏幕存在的全局数组。我的设置包括一个显示数组内容的屏幕，以及一个指向第二个屏幕的导航按钮，其中包含一个用于向列表添加元素的按钮。

我希望每次按下添加按钮时第一页上的列表都打印一个额外的“Hello World”，并显示一个初始项“Hello World Initial”。然而，使用下面的代码我只能显示初始值，我尝试添加更多的失败。

没有抛出任何错误，按下按钮似乎没有执行任何操作。这是该项目的小吃：https://snack.expo.dev/@figbar/context-across-files-and-screens，这是其中包含的代码：

App.js:

import { TestList, TestListProvider } from './File1';
import * as React from 'react';
import {View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Screen2 from './Screen2';


const Stack = createStackNavigator();


function HomeScreen({ navigation }) {
   const _retrievedList = React.useContext(TestList);
  const populate = (arg:any) => {
    return arg.map((val, index) => <Text key={index}>{val.value}</Text>);
  }
  return (
    <View>
        <View>{populate(_retrievedList)}</View>
        <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Screen2')}
      />
    </View>
    
  );
}
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Screen2" component={Screen2} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

File1.js

import React from 'react'

const testObject = {
    value: "Hello World Initial",
};

export const TestList = React.createContext([testObject]);

export const TestListProvider = TestList.Provider;

Screen2.js

import { TestList, TestListProvider } from './File1';
import * as React from 'react';
import {View, Text, Button } from 'react-native';


export default function Screen2() {

  const testObject2 = {
      value: "Hello World",
  }
  const [_localUpdate, _setLocalUpdate] = React.useState([]);
  
  const addItem = () => {
    _setLocalUpdate([..._localUpdate, testObject2]);
  }
  return (
    <View>
        <TestListProvider value={_localUpdate}>
          <Button onPress={addItem} title="Add" color="#841584" />
        </TestListProvider>
    </View>
  );
}

Answer 1

您的上下文提供程序必须包装所有将使用上下文值的组件。在此示例中，只有一个 Button 可以使用上下文 - none 您自己的组件可以。

您将希望将提供程序连同承载其值的状态一起移动到您的根组件。

React Native Context 不会跨文件和屏幕更新

React Native Context not updating across files and screens

reactjs

react-native

react-context