Reactjs 如何在 React Native 中更新跨屏幕呈现的上下文状态变量

对原住民的新react . 我使用上下文挂钩状态在应用程序的两个选项卡屏幕中使用array.

其中一个屏幕以FlatList的形式显示上下文数组，另一个屏幕将项插入到数组中.当数组更改时，正确的重新呈现方式是什么？

代码如下:

APP.JS

 const App = () => {

   const Tab = createBottomTabNavigator();

   return(
 
   <NavigationContainer>
       <Tab.Screen name="HomeScreen"  component={Home} />
       <Tab.Screen name="DiscoverScreen" component={Discover} />
   </NavigationContainer>

  );
}


export default function AppWrapper() {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
 }

AUTHCONTEXT.JS

 const AuthContext = createContext()

 const AuthProvider = ({ children }) => {

 const [array, setArray] = useState([]);

 return (
     <AuthContext.Provider value={{ array, setArray }}>
        {children}
     </AuthContext.Provider>
  )
 }

 export {AuthContext, AuthProvider}

♪Home.JS♪

export default Home = () => {

  const {array} = useContext(AuthContext);

  return(

     <View>
        <FlatList 
          data={array}
          renderItem={(item)=>{ 
          return(
             <Text>{item}</Text>
          )}}
          />
     </View>

    )
  }

DISCOVER.JS

 export default Discover = () => {

 const {setArray} = useContext(AuthContext);

 setArray((currentArray)=>[...currentArray,'test']);

 return(
    <View></View>
 );
}