Как добавить значок бокового меню в wix-реагировать на родную навигацию v2?

Question

Я новичок в реакции-родной. я хочу добавить значок бокового меню, как показано на следующем рисунке

в wix-реагировать на родную навигацию v1 было довольно просто. Нам нужно просто добавить

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

Но в документации V2 они сказали, что если вы добавите в боковое меню, используйте это, но они не сказали, как добавить иконку.

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

В результате появляется боковой ящик, если я перетащил с левой стороны, но значок отсутствует. Любая идея, как мне добавить такой значок на wix-реагировать на родную навигацию v2

Answer 1

Вы можете добавить эту статическую функцию с различными конфигами на вашем экране:

export default class Screen extends Component {

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

Полный список опций можно найти в документации по этой ссылке: опции topBar

Answer 2

Вы можете проверить эту ссылку https://github.com/wix/react-native-navigation/issues/796

Кнопка гамбургера больше не добавляется по умолчанию, так как многие пользователи просят контролировать, когда она отображается, а когда нет. На каждом экране вы хотели бы иметь кнопку гамбургера, добавьте ее явно:

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

Answer 3

Вы можете попробовать приведенный ниже код. Это создает экран на основе вкладок. Если вы хотите в качестве экрана, вы можете использовать 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"
              }
            }]
          }
        }
      }
    }
  });
}