Блог

Я использую 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',
            },
          },
        ],
      },
    },
  });
  

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

 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.

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

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

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

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

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

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

Решение заключается в использовании redux. Или mobx, как вам больше нравится.

Чтобы решить эту проблему, я использовал redux и redux-thunk.

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

С решением redux

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

 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

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

Вы можете использовать

 Navigation.mergeOptions()  

вот так, чтобы запустить и открыть ящик:

 navigationButtonPressed = ({ buttonId }) => {
  const { componentId } = this.props;

  if (buttonId === 'sideMenu') {
    Navigation.mergeOptions(componentId, {
      sideMenu: {
        left: {
          visible: true,
        },
      },
    });
  }
}