react-native-navigation的迁移库

sideMenu-disable.mdx 1.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. ---
  2. id: sideMenu-disable
  3. title: Disable Open and Close gesture
  4. sidebar_label: Open and Close Gesture
  5. ---
  6. To open the side menu programmatically, you'll need to update the visible property of the side menu you'd like to open.
  7. The following snippet shows how to open the left side menu.
  8. ```jsx
  9. Navigation.mergeOptions(componentId, {
  10. sideMenu: {
  11. left: {
  12. visible: true,
  13. },
  14. },
  15. });
  16. ```
  17. ## Open by pressing on the hamburger menu
  18. The most common use case is to open the side menu by pressing the hamburger button in the TopBar. To achieve this, listen to the press event of the burger button, and open the side menu as shown above.
  19. ```jsx
  20. const React = require('react');
  21. const Navigation = require('react-native-navigation');
  22. const { View, Text } = require('react-native');
  23. class SideMenuCenterScreen extends React.Component {
  24. static options() {
  25. return {
  26. topBar: {
  27. leftButtons: {
  28. id: 'sideMenu',
  29. icon: require('./menuIcon.png')
  30. }
  31. }
  32. };
  33. }
  34. constructor(props) {
  35. super(props);
  36. Navigation.events().bindComponent(this);
  37. }
  38. render() {
  39. return (
  40. <View>
  41. <Text>Click the hamburger icon to open the side menu</Text>
  42. </View>
  43. );
  44. }
  45. navigationButtonPressed({ buttonId }) {
  46. if (buttonId === 'sideMenu') {
  47. Navigation.mergeOptions(this, {
  48. sideMenu: {
  49. left: {
  50. visible: true
  51. }
  52. }
  53. });
  54. }
  55. }
  56. }
  57. ```