Текущая настройка:
У меня настроен и работает мой реактивный проект. Создаю приложение инвентаризации для D & D, и я использую response-native-router-flux для навигации и response-redux для передачи информации через магазин. Все отлично работает.
Мне удалось хорошо настроить мою структуру навигации с помощью RNRF, но я достиг области, которая за пределами того, что я знаю, как делать с RNRF. В настоящее время у меня есть главный экран, который содержит инвентарь игрока. Элементы заполнены FlatList. Нажатие на предмет переключает сцены в лайтбокс, который отображает больше информации о предмете, наложенном на сцену инвентаря. Опять отлично.
Желаемый результат:
Часть, с которой я борюсь. Иногда игрок может открыть отдельную сцену, основанную на слушателях базы данных, которая имитирует контейнер или сундук. Эта сцена содержит предметы, которые находятся внутри сундука, который им дают. Я хочу, чтобы пользователи могли нажимать на эти элементы внутри контейнера, чтобы узнать больше информации о них. Я хочу, чтобы на том же лайтбоксе сверху отображался OVERTOP открытой сцены контейнера, оставляя эту сцену контейнера открытой. Контейнерный лайтбокс и подробный элемент лайтбокс будут открыты.
Факт:
При нажатии на элемент внутри контейнера сцена контейнера исчезает, и открывается подробное описание элемента. Нажатие на детали этого элемента Lightbox закроет Lightbox и вернет сцену контейнера.
Я полагаю, это имеет отношение к тому, как я настроил мою структуру навигации, но я не уверен. Любопытно, если кто-то хотел сделать нечто подобное, как вещь. По сути, откройте OVERTOP в Lightbox уже открытого Lightbox.
Навигация. 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. Сцена инвентаря находится на заднем плане.
Открыт лайтбокс контейнера:
На этом рисунке показано, как выглядит лайтбокс контейнера. Сцена инвентаря находится на заднем плане. Я хочу, чтобы лайтбокс подробностей предмета сверху открывал ОВЕРТОП этого контейнера, когда кто-то нажимает на предмет.
Версии: