如何在不破坏屏幕状态的情况下保持安装屏幕并在反应导航 5 中在屏幕之间来回导航?

时间:2020-12-30 06:33:47

标签: react-native react-navigation-v5

我的 React Native 应用中有一个视频通话屏幕。我希望用户从视频通话屏幕返回应用程序并在通话期间继续使用应用程序,但是当我尝试返回堆栈导航器中的屏幕时,视频通话屏幕被卸载并丢失了状态,尽管通话仍在后台运行。我想在不破坏屏幕状态的情况下继续安装视频通话屏幕并在应用程序之间导航。在我的情况下,Modal 不是可取的。由于使用 react navigation 5 也不能使用 switch navigator。提前致谢。

1 个答案:

答案 0 :(得分:2)

我没有完全为我的案例安装屏幕,但我使用了另一种需要使用 Redux 的方法,首先当你打开你的应用程序时,index.js 被调用,然后是 App.js,但我们不能在应用程序中使用 Redux。我们调用的下一个 Node.js 主要是导航组件,因此如果您使用导航 v5 或任何导航组件,您可以传递视频通话组件并使用 redux 传递布尔值何时显示或隐藏该视频通话,并将数据传递给调用,例如使用 react navigation v5:

 <NavigationContainer>
    {reduxStateShowCall?<VideoCallComponent data={dataStoredInRedux}/>} 
 <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={Home}/>
      <Stack.Screen name="OtherScreen" component={OtherScreen}/>
  </Stack.Navigator>
 </NavigationContainer>

因此,当您将值 true 传递给 reduxStateShowCall 时,VideoCallComponent 将呈现在堆栈导航器中安装的所有屏幕上方,并且您可以在呈现调用组件时在该 NavigationContainer 内的屏幕之间导航,当您将值 false 传递给 reduxStateShowCall 时不会被渲染。