如何在 wix-react-native-navigation v2 中添加侧边菜单图标？

Question

我是 react-native 的新手。我想添加如下图所示的侧边菜单图标

在 wix-react-native-navigation v1 中相当简单。我们只需要添加

{
  tabs:[
    screen: "myscreenName",
    label: "MyLabel",
    icon: require('icon-url')
  ]
}

但是在 V2 文档中他们说如果你添加到侧边菜单使用这个但是他们没有说如何添加图标。

{
  root: {
    sideMenu: {
      left: {
        component: {
          name: 'sideDrawer'
        }
      },
      center: {
        bottomTabs: {
          .....
        }
      }
    }
  }
}

因此，如果我从左侧拖动但图标丢失，则会出现侧边抽屉。知道我如何在 wix-react-native-navigation v2

上添加这样的图标吗

Answer 1

您可以试试下面的代码。这将创建一个基于选项卡的屏幕。如果你想作为屏幕，你可以使用 Navigation.startSingleScreenApp(...)

    Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      sideMenu: {
        id: "sideMenu",
        left: {
          component: {
            id: "Drawer",
            name: "navigation.Drawer"
          }
        },
        center: {
          stack: {
            id: "AppRoot",
            children: [{
              component: {
                id: "App",
                name: "navigation.AppScreen"
              }
            }]
          }
        }
      }
    }
  });
}

Answer 2

你可以查看这个link https://github.com/wix/react-native-navigation/issues/796

The hamburger button is no longer added by default since a lot of users asked to control when it's displayed and when not. In every screen you'd like to have the hamburger button, add it explicitly:

static navigatorButtons = { leftButtons: [ { id: 'sideMenu' } ] };

Answer 3

您可以在屏幕中添加具有不同配置的静态函数：

export default class Screen extends Component {

  static get options() {
    return {
      topBar: {
        title: {
          text: 'Screen',
        },
        leftButtons: [
          {
            icon: require('../../../assets/icons/burgerMenu.png'),
            id: 'toggleDrawer',
          },
        ],
      },
    };
  }
}

完整的选项列表可以在 link 的文档中找到：topBar options

如何在 wix-react-native-navigation v2 中添加侧边菜单图标？

How to add side menu icon in wix-react-native-navigation v2?

react-native

react-native-navigation

wix-react-native-navigation