如何在抽屉的主页和通知之前放置图标.屏幕

Question

我正在学习如何使用React Navigation。

如何在抽屉的主页和通知之前放置图标。屏幕

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}

我该怎么做才能在进入视图时添加一个选项卡屏幕

Answer 1

您可以创建一个自定义组件并将其呈现在抽屉中。

这里的ButtonList是一个自定义组件，您可以将它传递给drawerContent。您可以在按钮列表中创建一个列表，并将图标轻松地放在主页和通知之间。

<ActionDrawer.Navigator
drawerType="back"
drawerPosition="right"
drawerContent={(props) => <ButtonList {...props} />}
drawerStyle={{
width: wp('65'),
}}
>