ReactNative之SideMenu

来源:互联网 发布:20端口是什么 编辑:程序博客网 时间:2024/06/05 06:54

SideMenu是别人写好的第三方框架,需要先下载再引入,最后使用,三步走。。。

SideMenu经常用,比如QQ你往右划一下就出来一个隐藏的侧滑菜单

第一步下载:

切换到工程根目录下,打开cmd,输入下面的指令等待下载成功就好了。。。

npm install react-native-side-menu--save

第二部:

SideMenu引入到使用页面:

import SideMenufrom 'react-native-side-menu';

第三步:

最后当然是苦逼的写代码了。。。

侧滑菜单首先要建一个pages文件夹吧。。。里面至少建立两个页面一个主内容页面contentPage跟一个侧滑菜单页面sideMenuPage。。。

然后把这两个页面引入到使用主页面

 render() {

    const menu = <Menu navigator={this.navigator}/>;

    return (

      <SideMenu

menu={menu}  //菜单页在此引入

isPoen={this.state.isOpen}

bounceBackOnOverdraw = {false}  //关闭弹性跳动

> 

        <ContentView/>  //内容页在此引入

      </SideMenu>

    );

  }

SideMenu常用属性:

1、isOpen  属性控制侧滑菜单的显示与否,我们通过改变这个值可以进而改变侧划菜单的显示情况

2、bounceBackOnOverdraw  就是侧滑菜单划到头的时候时候有一个弹性跳动。。。别的方法几乎不常用。。。

 

想了解更多请查看下边俩网站:

http://blog.csdn.net/github_33304260/article/details/55517995

https://github.com/react-native-community/react-native-side-menu