react-native-DrawerLayoutAndroid

Posted 2022-12-14 time_iter

DrawerLayoutandroid:
抽屉：通过renderNavigationView进行渲染的；通过drawerPostition指定位置把导航视图拖拽出来

1-：

import  React, Component from 'react';

import 
    AppRegistry,
    Text,
    View,
    StyleSheet,
    DrawerLayoutAndroid,
 from 'react-native';


class FristProject extends Component 
    render() 
        var leftview = (
            <View style=flex:1,backgroundColor:'#63b8ff'>
             //此处布局为划动出来之后相关布局
            </View>
        );


        return (
            <DrawerLayoutAndroid
                drawerWidth=250
                drawerPosition=DrawerLayoutAndroid.positions.left
                renderNavigationView=()=>this.leftview>

                <View>
                //主布局
                </View>

            </DrawerLayoutAndroid>
        );
    



AppRegistry.registerComponent('FristProject', ()=>FristProject);

2-：属性&方法
drawerPosition:指定滑出位置

<enum:DrawerLayoutAndroid.positions.left,DrawerLayoutAndroid.positions.Right>

drawerWidth: 视图宽度
keyboardDismissMode: 视图拖拽过程中是否需要隐藏键盘

<enum:none,on-drag>
—:none <默认值，默认不会隐藏>
—:on-drag <当拖拽开始的时候进行键盘隐藏>
onDrawerClose(): 视图关闭
onDrawerOpen(): 视图打开
onDrawerSlide(): 视图和用户进行交互的时候回调此方法
onDrawerStateChanged():视图状态发生变化回调此方法

<enum:idle,dragging,settling>
-:idle 空闲:表示视图上没有任何交互状态
-: dragging 正在拖拽中:正在进行交互动作
-:settling 暂停－刚刚结束:刚刚结束交互动作<打开或者关闭>

renderNavigationView():渲染一个视图<用于用户从两边位置拖拽出来显示>