Переход к другому экрану в зависимости от состояния пожарной базы - PullRequest
Новая
       43

Переход к другому экрану в зависимости от состояния пожарной базы

1 голос
/ 23 июня 2019

Мне было просто интересно, есть ли лучший способ обработки навигации в моем приложении-реактиве, используя react-navigation в зависимости от состояния firebase.

Итак, у меня есть PreGameScreen, который показывает списокигроков и у каждого игрока есть кнопка «Готово», которая при нажатии изменит их состояние ready на true в их базе данных огня - как только все игроки будут готовы, я бы хотел перейти к GameScreen.

Таким образом, каждый игрок подключен к состоянию FireBase, поэтому у него будет обратный вызов в любое время при изменении состояния в FireBase.

Мое текущее решение - функция рендеринга React Component. У меня есть логика, которая проверяет, готовы ли все игроки, иесли это так, перейдите на экран.

Есть ли лучший способ сделать это, например, с помощью какого-нибудь компонента навигации?Таким образом, в конечном итоге будет больше экранов, и я хотел бы управлять экраном, который видит пользователь, основываясь на состоянии пожарной базы.

Ниже приведен порядок настройки схемы пожарной базы 

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 Ответ

0 голосов
/ 26 июня 2019

Если вы хотите перемещаться за пределы иерархии компонентов, попробуйте Навигация без реквизитов навигации

Пример 

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