当前设置:
我建立了我的反应本地项目,并且运行得很好。构建一个用于D&D的库存应用程序,我正在使用react-native-router-flux进行导航,并使用react-redux来通过商店传递信息。一切正常。
我能够使用RNRF很好地设置我的导航结构,但是我到达了我不知道如何使用RNRF的范围。目前,我有一个主屏幕,其中保存了玩家的清单。使用flatList填充项目。按下项目将场景切换到灯箱,该灯箱显示有关覆盖在库存场景中的项目的更多信息。再次,完美。
所需结果:
我正在努力的部分。玩家有时可以根据数据库侦听器打开一个单独的场景,以模拟一个容器或箱子。该场景中包含的物品将位于所给它们的胸部内。我希望用户能够按一下容器内的那些项目以找到有关它们的更多信息。我希望从上方向上显示相同的灯箱,以显示当前打开的容器场景的OVERTOP,使该容器场景保持打开状态。容器灯箱和详细信息灯箱都将打开。
实际:
按下容器内部的项目后,容器场景消失,并且项目详细信息Lightbox打开。在该项目的详细信息外面按,Lightbox将关闭Lightbox并重新显示容器场景。
我相信它与我如何设置导航结构有关,但是我不确定。好奇是否有人想做一件类似的事情。本质上,打开已经打开的灯箱的灯箱OVERTOP。
Navigation.js
render() {
return (
<Provider store={store}>
<RouterWithRedux>
<Stack>
<Lightbox hideNavBar>
<Scene key="root">
<Scene key="login" component={Login} initial={true} actionConst={actionConst.RESET} hideNavBar />
{/* This defines which screens will have the drawer */}
<Scene key="drawer" navigationBarStyle={{ backgroundColor: '#06531D' }} style={styles.drawer} drawerPosition="left" contentComponent={DrawerComponent} hideNavBar drawer={true} drawerWidth={200} >
<Scene key="lobby" navigationBarStyle={{ backgroundColor: '#06531D' }} titleStyle={{ color: '#FFFFFF' }} component={Lobby} title="Lobby" />
</Scene>
<Scene key="inventory" component={InventoryScreen} title="Inventory" />
<Scene key="register" component={RegisterScreen} />
</Scene>
{/* These are the "modals" */}
<Scene key="playerLightbox" component={newChar} style={styles.lightbox}></Scene>
{/* THIS IS THE DetaILS ITEM LIGHTBOX */}
<Scene key="itemLightbox" component={itemDetailed} style={styles.lightbox}></Scene>
{/* THIS IS THE CONTAINER LIGHTBOX */}
<Scene key="openContainer" component={openContainer} style={styles.lightbox}></Scene>
<Scene key="giveMoney" component={giveMoney} style={styles.lightbox}></Scene>
<Scene key="enterLobbyCode" component={enterLobbyCode} style={styles.lightbox}></Scene>
<Scene key="itemInteract" component={itemInteract} style={styles.lightbox}></Scene>
</Lightbox>
</Stack>
</RouterWithRedux>
</Provider>
);
}
具有“项目详细信息”的库存显示:
此图片显示LightBox项目详细信息的外观。库存场景位于背景中。
容器灯箱打开:
此图显示了容器Lightbox的外观。库存场景位于背景中。当有人按下某个项目时,我希望“项目详细信息”灯箱从上方打开此容器灯箱的OVERTOP。
版本:
-
react-native-router-flux v4.0.6
-
反应v16.8.3
-
反应原生v0.59.8