React native 在整个应用程序中仅加载一次组件

我开始了我的第一个注册护士学习项目，却被困在了其他地方。基本上，在用户登录后，我希望在顶部显示一个文本

IDComponent.js

import React from 'react';
import { Text } from 'react-native';

const IDComponent = () => {
 //generate the ID
  const id = generateId();
  return (<View><Text>{id}</Text></View>);
};

export default IDComponent;

从“React”导入React；
从“react native”导入{Text}；
常量IDComponent=（）=>{
//生成ID
const id=generateId（）；
返回（{id}）；
};
导出默认IDComponent；

用户登录后，我在所有屏幕中显示组件，如下所示：

ScreenHome.js

import React from 'react';
import { View } from 'react-native';

const ScreenHome = () => {

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

export default ScreenHome;

从“React”导入React；
从“react native”导入{View}；
常量屏幕主页=（）=>{
返回(
);
};
导出默认屏幕主页；

ScreenFormP.js

import React from 'react';
import { View } from 'react-native';

const ScreenFormP = () => {

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

export default ScreenFormP;

从“React”导入React；
从“react native”导入{View}；
const ScreenFormP=（）=>{
返回(
);
};
导出默认屏幕格式；

我希望IDComponent（）只被调用一次。我尝试了以下操作，但根本没有加载组件：

      const [isLoadedAlready, setLoadingState ] =useState(false)

      if (isLoadedAlready){
            return null;
        }
       setLoadingState(true);
       return(<Text>{generateId()}</Text>)

const[isLoadedAlready，setLoadingState]=useState（false）
如果（isLoadedAlready）{
返回null；
}
设置加载状态（真）；
返回（{generateId（）}）

但这使得compnoent根本就不会渲染

或者，是否有一种方法可以执行一次：

ScreenContainer.js

     <IDComponent>
     <OtherScreensPlaceHolder>

---

所有其他屏幕都将在其中填充？

看起来您正在不同的页面上呈现相同的组件。你可以尝试两种不同的方法。随着道具或导航的更改，它会重新渲染整个组件，包括只需加载一次的组件

您可以尝试布局系统，制作一个类似layout.js的全局布局组件，并将IDComponent放在顶部。并在组件上作为道具传递所有其他页面

您可以从中了解持久布局模式

或者在导航页面的react native中，将组件放在顶部，以便它在ScreenContainer.js文件中始终位于顶部

还可以在组件上尝试PureComponent和useMoom，以避免重新加载

希望这有帮助，如果不工作让我知道