Собственная навигация WIX React: Показать боковой ящик в приложении на основе вкладок - PullRequest
Новая
       18

Собственная навигация WIX React: Показать боковой ящик в приложении на основе вкладок

1 голос
/ 23 апреля 2019

Я использую React Native Navigation v2 из WIX в моем проекте RN.Для стека Dashboard (goToDahboard) мне нужно показать иконку гамбургера слева на боковой панели клика.Как это можно реализовать?

После обновления с v1 параметры бокового меню изменились, и документы не достаточно ясны. 

export const goToDashboard = () =>
  Promise.all([
    Icon.getImageSource('home', 22, '#272727'),
    Icon.getImageSource('th-list', 22, '#272727'),
  ]).then(sources => {
    Navigation.setRoot({
      root: {
        bottomTabs: {
          children: [
            {
              stack: {
                children: [
                  {
                    component: {
                      name: 'Dashboard',
                    },
                  },
                ],
                options: {
                  bottomTab: {
                    icon: sources[0],
                    text: 'Dashboard',
                  },
                },
              },
            },
            {
              stack: {
                children: [
                  {
                    component: {
                      name: 'Settings',
                    },
                  },
                ],
                options: {
                  bottomTab: {
                    icon: sources[1],
                    text: 'Settings',
                  },
                },
              },
            },
          ],
          id: 'bottomTabs',
        },
      },
    });
  });

export const goToAuth = () =>
  Navigation.setRoot({
    root: {
      stack: {
        id: 'Login',
        children: [
          {
            component: {
              name: 'Login',
            },
          },
        ],
      },
    },
  });

1 Ответ

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

Я использую вот так, вот мой код; 

Navigation.setRoot({
    root:{
        sideMenu:{
            left:{
                component:{
                    name:'app.Main.SideDrawer'
                }
            },
            center:{
                bottomTabs:{
                    id: 'MainAppBottomTab',
                    children:[
                        {
                            stack:{
                                children:[
                                    {
                                        component:{
                                            name: 'app.Main.Bottom_1',
                                            options:{
                                                bottomTab:{
                                                    text: "Bottom 1",
                                                    icon: require('./../../assets/images/Bottom_1.png'),
                                                }
                                            },
                                        }
                                    }
                                ],
                                options: {
                                    bottomTab: {
                                        text: 'Bottom 1',
                                    },
                                    bottomTabs:{
                                        backgroundColor: ColorTable.orange,
                                        animate:false,
                                    },
                                    topBar:{
                                        title:{
                                            text: 'Bottom 1',
                                        },
                                        leftButtons:[
                                            {
                                                id: 'btn_toggle_drawer',
                                                name: 'BTN_TOGGLE_DRAWER',
                                                icon: require('./../../assets/images/hamburger_icon.png'),
                                            }
                                        ],
                                    }
                                }
                            }
                        }
                    ]
                }
            }
        }
    }
});

Теперь нам нужно использовать жизненный цикл wix.

Если вы хотите закрыть его в SideDrawer, вы должны использовать следующий код: 

Navigation.mergeOptions(this.props.componentId, {
    sideMenu: {
        left: {
            visible: false
        }
    }
});

this.props.componentId равно app.Main.SideDrawer. Из-за того, что мы находимся в компоненте app.Main.SideDrawer.

Если вы хотите открыть значок гамбургера, перейдите на любую страницу, которую вы хотите использовать для bottomTab, в нашем примере я сказал Bottom_1.

Не забудьте ввести Navigation.events().bindComponent(this) в метод конструктора. Это позволяет связываться с родным.

Будет работать только следующая команда; 

navigationButtonPressed({buttonId}) {
    if (buttonId === "btn_toggle_drawer") {

        Navigation.mergeOptions(this.props.componentId, {
            sideMenu: {
                left: {
                    visible: true
                }
            }
        });
    }
}

Код выше работает, но проблематично. Вы скажете мне, что мне придется дважды нажать, чтобы выключить его =)

Решением является использование приставки. Или MOBX, какой вы предпочитаете.

Для решения этой проблемы я использовал redux и redux-thunk.

Wix - это жизненный цикл, изучите его: https://wix.github.io/react-native-navigation/#/docs/Usage?id=screen-lifecycle

С раствором редукса

Реальная функция есть; 

navigationButtonPressed({buttonId}) {
        if (buttonId === "btn_toggle_drawer") {
            this.props.toggleDrawer(this.props.isSideDrawerVisible);

            Navigation.mergeOptions(this.props.componentId, {
                sideMenu: {
                    left: {
                        visible: this.props.isSideDrawerVisible
                    }
                }
            });
        }
    }

действие toggle_drawer 

export const toggleDrawer = (visible) => {
    return (dispatch) => {
        (visible) ? visible = true : visible = false;

        dispatch({
            type: TOGGLE_DRAWER,
            payload: visible
        });
    }
};

toggle_drawer Редуктор 

const INITIAL_STATE = {
    isSideDrawerVisible: true
};

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case TOGGLE_DRAWER:
            return {...state, isSideDrawerVisible: action.payload};
        default:
            return state;
    }
}

Пример функции подключения; 

import {connect} from "react-redux";

// actions
import {toggleDrawer} from "../../../actions/toggle_drawer";
const mapStateToProps = state => {
    return {
        isSideDrawerVisible: state.toggleDrawer.isSideDrawerVisible,
    }
};

export default connect(mapStateToProps, {toggleDrawer})(Bottom_1_Screen);

Не забудьте подключить wix к Redux. https://wix.github.io/react-native-navigation/#/docs/third-party?id=redux

Надеюсь, я смогу вам помочь, я видел это немного поздно. Хорошего дня ..

...