Реагируйте на собственный поток маршрутизатора - лайтбокс в лайтбоксе - PullRequest
0 голосов
/ 10 апреля 2020

Текущая настройка:

У меня настроен и работает мой реактивный проект. Создаю приложение инвентаризации для 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. Сцена инвентаря находится на заднем плане. Inventory with Item Details showing

Открыт лайтбокс контейнера:

На этом рисунке показано, как выглядит лайтбокс контейнера. Сцена инвентаря находится на заднем плане. Я хочу, чтобы лайтбокс подробностей предмета сверху открывал ОВЕРТОП этого контейнера, когда кто-то нажимает на предмет. Container Lightbox open

Версии:

  • response-native-router-flux v4.0.6

  • реакция v16.8.3

  • реакция нативная v0.59.8

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...