Question

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

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

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

维克斯的生命周期，请进行探索：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,
        },
      },
    });
  }
}

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

2 个答案: