根据 Firebase 状态导航到另一个屏幕

Posted

技术标签:

【中文标题】根据 Firebase 状态导航到另一个屏幕【英文标题】:Navigating to another screen based on firebase state 【发布时间】:2019-11-05 06:32:51 【问题描述】:

我只是想知道是否有更好的方法来处理我的 react-native 应用程序中的导航,使用 react-navigation 取决于 firebase 状态。

所以我有一个PreGameScreen,它显示了一个玩家列表,每个玩家都有一个就绪按钮,当按下该按钮时,他们的 firebase 文档中的ready 状态将更改为true - 一旦所有玩家都准备好了,我想要将它们导航到GameScreen

因此,每个玩家都连接到 firebase 状态,因此他们将在 firebase 中的任何状态更改时收到回调。

我目前的解决方案是在 React Component 渲染函数中,我有一些逻辑可以检查所有玩家是否准备好,如果准备好,则将它们导航到屏幕。

有没有更好的方法来做到这一点,例如有某种导航大脑组件?所以最终会有更多的屏幕,我想根据 firebase 状态来控制用户看到的屏幕。

下面是我如何设置 firebase Schema

Game Document
   gameName: string
   *players*: Firebase Collection 

Player Document
    playerName: string
    ready: bool

这是我在渲染函数中的一些代码

   render() 

        const  gameData, currentPlayer, navigation, allPlayersAreReady  = this.props;

            if(allPlayersAreReady) 
                navigation.navigate('InRound');
                return null;
            

        return (
           <View style=styles.page>

               <View><Text>Pre-Round Screen</Text></View>

               <View><Text>gameData.gameName</Text></View>
               <PlayersList/>

               !currentPlayer.ready &&
                <ReadyButton/>
               

           </View>
        )
    

【问题讨论】:

【参考方案1】:

如果您想在组件层次结构之外导航,请尝试Navigating without navigation props

例子

// App.js

import  createStackNavigator, createAppContainer  from 'react-navigation';
import NavigationService from './NavigationService';

const TopLevelNavigator = createStackNavigator( /* ... */ )

const AppContainer = createAppContainer(TopLevelNavigator);

export default class App extends React.Component 
  // ...

  render() 
    return (
      <AppContainer
        ref=navigatorRef => 
          NavigationService.setTopLevelNavigator(navigatorRef);
        
      />
    );
  

// NavigationService.js

import  NavigationActions  from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) 
  _navigator = navigatorRef;


function navigate(routeName, params) 
  _navigator.dispatch(
    NavigationActions.navigate(
      routeName,
      params,
    )
  );


// add other navigation functions that you need and export them

export default 
  navigate,
  setTopLevelNavigator,
;

然后在你的 firebase 导航大脑中做

import NavigationService from 'path-to-NavigationService.js';

// ...

NavigationService.navigate('ChatScreen',  userName: 'Lucy' );

【讨论】:

以上是关于根据 Firebase 状态导航到另一个屏幕的主要内容,如果未能解决你的问题,请参考以下文章

在状态转换错误期间无法更新-导航到另一个屏幕时使用挂钩对本机做出反应

根据存储在共享首选项中的记住我状态导航到屏幕

带有和不带有 Equatable 的 Flutter bloc 导航

在flutter中处理链接并使用firebase动态链接导航

谷歌登录后如何通过 Firebase 重定向到另一个屏幕? iOS

如何从一个屏幕导航到另一个屏幕