根据 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动态链接导航