(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' });
rn 侧滑栏组件
猜你喜欢
转载自blog.csdn.net/weixin_43294560/article/details/108207684
今日推荐
周排行