React Native Navigation Wix V2顶部栏按钮动作

时间:2018-12-19 14:46:54

标签: react-native wix-react-native-navigation react-native-navigation-v2

我正在使用WIX V2导航,我想创建一个leftButton来切换sideMenu并使其在按下时可见,我正在实现导航堆栈,如下所示:

Navigation.setRoot({
    root: {
        sideMenu: {
            left: {
                component: {
                    name: 'app.Drawer',
                    enabled: false,
                    visible: false,
                },
            },
            center: {
                stack: {
                    children: [{
                        component: {
                            name: 'app.Screen',
                        },
                    }, ],
                },
            },
        },
    },
});

在具有切换菜单的屏幕上,我创建了以下选项和事件:

    import { Navigation } from "react-native-navigation";

    export default class Screen extends Component {
      constructor(props) {
        super(props);
        Navigation.events().bindComponent(this);
      }
      static get options(passProps) {
        return {
          topBar: {
            title: {
              text: 'Screen',
            },
            leftButtons: [
              {
                icon: require('../../../assets/icons/burgerIcon.png'),
                id: 'toggleMenu',
              },
            ],
          },
        };
      }

  navigationButtonPressed({ buttonId }) {
    Navigation.mergeOptions('app.Drawer', {
      sideMenu: {
        left: {
          visible: true, 
        },
      },
    });
  }

我尝试遵循此处的文档,但事件监听器navigation button pressed event docs并未捕获该事件

2 个答案:

答案 0 :(得分:0)

List<string> lstIpAddress = new List<string>(); int nCount = 0; private void button1_Click(object sender, EventArgs e) { string strIp = textBox1.Text; if (strIp.Length > 0) { lstIpAddress = strIp.Split(',').ToList(); for (int nlstItem = 0; nlstItem < lstIpAddress.Count; nlstItem++) { listBox1.Items.Add(lstIpAddress[nlstItem]); } label2.Text = listBox1.Items[nCount].ToString(); nCount++; } } 应该被赋予ID,而不是名称

我不确定,但我也认为启用和可见的位置错误

Navigation.mergeOptions()

答案 1 :(得分:0)

您可以尝试下面的代码。希望对您有所帮助。

您的主屏幕或应用屏幕:

import React, { Component } from 'react'
import { Navigation } from "react-native-navigation";

export default class HomeScreen extends Component {
  static get options() {
    return {
      topBar: {
        title: {
          text: 'Screen',
        },
        // Configure your button style here
        leftButtons: [
          {
            id: "sideMenu",
            icon: require('../../../assets/icons/burgerIcon.png'),
          }
        ]
      }
    };
  }

  constructor(props) {
    super(props);
    Navigation.events().bindComponent(this);
  }

  navigationButtonPressed({ buttonId }) {
    try {
      Navigation.mergeOptions("app.Drawer", {
        sideMenu: {
          left: {
            visible: true,
          },
        },
      });  
    } catch (error) {
      //
    }
  }

  render() {
    return (
      <View >
        <Text>Hello from Home screen.</Text>
      </View>
    )
  }
}

对于导航:

Navigation.setRoot({
  root: {
    sideMenu: {
      id: "sideMenu",
      left: {
        component: {
          id: "app.Drawer",
          name: "app.Drawer",
        }
      },
      center: {
        stack: {
          id: "App",
          children: [{
            component: {
              id: "app.Screen",
              name: "app.Screen"
             }
          }]
        }
      }
    }
  }   
});

软件包版本: “ react-native”:“ 0.59.4”, “ react-native-navigation”:“ ^ 2.17.0”,