rn 侧滑栏组件

迷南。 2021-07-24 22:21 566阅读 0赞

(1)安装
    	yarn add @react-navigation/native
    	yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
    	yarn add @react-navigation/drawer
    	
    (2)导入
    	import 'react-native-gesture-handler';
    	import { NavigationContainer } from '@react-navigation/native';
    	import { createDrawerNavigator } from '@react-navigation/drawer';
    	
    (3)使用
    	const Drawer = createDrawerNavigator();
    	<NavigationContainer>
    	    <Drawer.Navigator>
    	      <Drawer.Screen name="Feed" component={Feed} />
    	      <Drawer.Screen name="Article" component={Article} />
    	    </Drawer.Navigator>
    	 </NavigationContainer>
    
    (4)Drawer.Navigator配置参数
    	(1)initialRouteName
    	(2)screenOptions
    	(3)backBehavior 返回按钮处理的行为。
    		initialRoute	返回初始选项卡
    		order	返回到上一个选项卡(按照选项卡栏中显示的顺序)
    		history	返回到上次访问的标签页
    		none	不处理后退按钮
    	(4)openByDefault	抽屉是否应该在默认情况下保持打开。当这是真的，抽屉将打开从最初的渲染。它可以使用手势或编程方式正常关闭。但是，当你回去的时候，如果抽屉被关闭了，它会重新打开。这本质上反转了折叠项的行为，关闭状态是默认状态。
    	(5)drawerPosition	left or right. Default is left position.
    	(6)drawerType	它决定了抽屉的外观和动画效果。
    	    front: 	用一层覆盖物覆盖屏幕的传统抽屉。
    	    back: 	滑动屏幕，抽屉就会露出来。
    	    slide: 	屏幕和抽屉都可以滑动来显示抽屉。
    	    permanent: 一个永久的抽屉显示在侧边栏中。对于在大屏幕上始终可见抽屉非常有用。
    	(7)edgeWidth	允许定义从内容视图边缘到滑动手势应该激活的距离。
    	(8)hideStatusBar	当设置为true抽屉组件将隐藏操作系统的状态栏每当抽屉被拉或当它在一个“打开”的状态。
    	(9)statusBarAnimation	隐藏状态栏时的动画。与hideStatusBar结合使用。
    	(10)keyboardDismissMode	当滑动手势开始时，是否应该取消键盘。默认为“on-drag”。设置为“none”禁用键盘处理。
    	(11)minSwipeDistance	最小滑动距离阈值，应激活打开抽屉。
    	(12)overlayColor	当抽屉打开时，颜色覆盖显示在内容视图的顶部。当抽屉打开时，不透明度从0到1动画。
    	(13)gestureHandlerProps	要传递给底层平移手势处理程序的道具。
    	(14)lazy	屏幕是否应该在第一次被访问时呈现。默认值为true。如果你想在初始渲染时渲染所有屏幕，设置为false。
    	(15)sceneContainerStyle	包装屏幕内容的组件的样式对象
    	(16)drawerStyle	抽屉组件的样式对象。
    	(17)drawerContent	返回React元素以作为折叠项的内容呈现的函数，例如导航项
    		接收如下参数
    		state	导航器的导航状态，state。路由包含所有路由的列表
    	    navigation 导航器的导航对象。
    	    descriptors 	包含折叠项屏幕选项的描述符对象。选项可在以下访问descriptors[route.key].options.
    	    progress 表示折叠项的动画位置的重新动画节点(0关闭;1开放)。
    	   	
    	   	自定义内容
    	   	import {
    		  DrawerContentScrollView,
    		  DrawerItemList,
    		} from '@react-navigation/drawer';
    		
    		function CustomDrawerContent(props) {
    		  return (
    		    <DrawerContentScrollView {...props}>
    		      <DrawerItemList {...props} />
    		      <DrawerItem
    		        label="Help"
    		        onPress={() => Linking.openURL('https://mywebsite.com/help')}
    		      />
    		    </DrawerContentScrollView>
    		  );
    		}
    		
    		DrawerItem接收参数
    		label (required): 可以是字符串，或者是返回react元素的函数.
    	    icon:接受返回react元素的函数
    	    focused: 指示是否将折叠项突出显示为选中的布尔值。
    	    onPress (required)
    	    activeTintColor
    	    inactiveTintColor.
    	    activeBackgroundColor
    	    inactiveBackgroundColor
    	    labelStyle:Style object for the label Text.
    	    style: Style object for the wrapper View.
    	(18)drawerContentOptions	包含折叠项内容组件的道具的对象
    		activeTintColor
    		activeBackgroundColor
    		inactiveTintColor
    		inactiveBackgroundColor
    		itemStyle	对象的样式，它可以包含一个图标和/或一个标签。
    		labelStyle
    		contentContainerStyle	滚动视图内内容部分的样式对象。
    		style	包装器视图的样式对象。
    		
    (5)Drawer.Screen 参数配置
    	(1)title	
    	(2)drawerLabel	String或给定{focused, color}返回一个React元素的函数，以显示在折叠项边栏中。当未定义时，使用场景标题
    	(3)drawerIcon	函数，给定{focused, color, size}返回一个React元素，以显示在折叠项边栏中
    	(4)swipeEnabled	是否可以使用滑动手势打开或关闭抽屉。默认值为true。
    	(5)gestureEnabled	是否可以用手势打开或关闭抽屉。设置为false将禁用滑动手势和点击叠加关闭。参见“滑动启用”仅禁用滑动手势。
    	(6)unmountOnBlur	当导航离开该屏幕时，是否应卸载该屏幕。卸载屏幕将重置屏幕中的任何本地状态以及屏幕中嵌套导航器的状态。默认值为false。通常，我们不建议启用这个道具，因为用户不希望在切换屏幕时丢失他们的导航历史。如果你启用这个道具，请考虑这是否真的会为用户提供更好的体验。
    
    (6)侧边栏事件
    	navigation.addListener('drawerOpen', (e) => { ... });
    	navigation.addListener('drawerClose', (e) => { ... });
    
    (7)方法打开/关闭
    	navigation.openDrawer();
    	navigation.closeDrawer();
    	navigation.toggleDrawer();
    
    (8)跳转方法
    	navigation.jumpTo('Profile', { owner: 'Satya' });