Question

我只是想知道是否有更好的方法来根据react-navigation状态使用firebase处理我的本机应用程序中的导航。

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

因此每个玩家都已连接到Firebase状态，因此只要Firebase中的状态发生变化，他们都将有一个回调。

我当前的解决方案是在React Component渲染函数中，我有一些逻辑可以检查所有播放器是否准备就绪，是否可以将它们导航到屏幕。

是否有更好的方法来做到这一点，例如具有某种导航大脑组件？因此最终会有更多屏幕，我希望根据Firebase状态控制用户看到的屏幕。

以下是我如何设置Firebase架构

Game Document
   gameName: string
   *players*: Firebase Collection 

Player Document
    playerName: string
    ready: bool

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

   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>
        )
    }

Answer 1

如果要导航到组件层次结构之外，请尝试Navigating without navigation props

示例

Error: package or namespace load failed for ‘glue.1.3.1’ in library.dynam(lib, package, package.lib):
 shared object ‘glue.so’ not found
Error: loading failed
Execution halted

// NavigationService.js

devtools::install_github('oganm/glue)

然后在您的Firebase导航大脑中做

// 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);
        }}
      />
    );
  }
}

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

1 个答案: