react native 抽屉效果

前端之家收集整理的这篇文章主要介绍了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
附图

猜你在找的React相关文章