react native 抽屉效果

在react native中，我们如果想要实现android的抽屉效果其实挺简单的，因为react-native为我们提供了DrawerLayoutAndroid这个api，使我们可以用几行代码就能实现酷炫吊炸天的动画效果，我们先来看看官网的介绍

这里主要就是介绍了drawerlayoutandroid有几个重要的方法，一个使设置宽度，一个是设置动画完成的时间，另一个是设置是否要支持手势操作，由于比较简单，直接上代码：

render() {
    const { drawer,navigator } = this.state;
        const navView = React.createElement(LeftNavigtor);
        return (
      <DrawerLayoutAndroid
                drawerWidth={200}
        drawerLockMode='locked-closed'
                drawerPosition={DrawerLayoutAndroid.positions.Left}
                renderNavigationView={() => {
                    if (drawer && navigator) {                  
                        return navView;
                    }                    
                    return null;
                }}   
                ref={(drawer) => { !this.state.drawer ? this.setDrawer(drawer) : null }}
            >
      {
        drawer &&
                <Navigator
          style={{paddingTop:55,backgroundColor:'#FFFFFF'}}
                    initialRoute={{
                id: 'homepage',params: {}
            }}
          ref={(navigator) => { !this.state.navigator ? this.setNavigator(navigator) : null }}
                    navigationBar={<Toolbar onIconPress={drawer.openDrawer} />}
                    configureScene={this.configureScene}
                    renderScene={this._renderRoute.bind(this)}
                />
        }
        </DrawerLayoutAndroid>

        );
  }


}

这里有几点要注意，如果你的视图只允许点击时才出现，那么你要配置drawerLockMode='locked-closed'这个属性，并且必须使 ref={(drawer) => { !this.state.drawer ? this.setDrawer(drawer) : null }}存在，然后点击时用方法 navigationBar={<Toolbar onIconPress={drawer.openDrawer} />}drawer.openDrawer
附图

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!