WIX React Native Navigation：在基于选项卡的应用程序中显示侧抽屉

Question

我在我的 RN 项目中使用来自 WIX 的 React Native Navigation v2。对于仪表板（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',
            },
          },
        ],
      },
    },
  });

Answer 1

我是这样使用的，这就是我的代码；

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 组件中。

如果您想使用汉堡图标打开，请转到您要用于底部标签的任何页面，在我们的示例中，我说的是底部_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

希望能帮到你，我看的有点晚了。 祝你有美好的一天..

Answer 2

你可以使用

Navigation.mergeOptions()

像这样开火并打开抽屉：

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

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