你好,请我需要帮助一个React Native项目的错误
我创建了一个带有子菜单的抽屉,并尝试使用DrawerItem中的导航属性,以便子菜单可以导航到特定屏幕
下面是我的代码
应用程序js
`
import 'react-native-gesture-handler';
import { StyleSheet, Text, View } from 'react-native';
//screens
import Home from './screens/Home';
import Login from './screens/Login';
import Logout from './screens/Logout';
import Profile from './screens/Profile';
import DrawerNavigator, { Drawer } from './components/DrawerNavigator';
// icons
import {
FontAwesome,
Feather
} from '@expo/vector-icons'
import { Colors } from './components/styles';
import CustomDrawer from './components/CustomDrawer';
// colors
const { gray } = Colors;
export default function App() {
return (
<DrawerNavigator
initialRouteName='Home'>
<Drawer.Screen
name="Logout"
component={Logout}
options={{
drawerIcon: ({ focused, color, size }) => (
<Feather name='power' size={20} color={gray} />
)
}}
/>
<Drawer.Screen
name="Home"
component={Home}
options={{
drawerLabel: () => null
}}
/>
</DrawerNavigator>
);
}
`
抽屉导航器.js
`
import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { Colors } from './styles';
import CustomDrawer from './CustomDrawer';
// colors
const { secondary, gray } = Colors
export const Drawer = createDrawerNavigator();
const DrawerNavigator = ({ children, initialRouteName }) => {
return (
<NavigationContainer>
<Drawer.Navigator
drawerContent={(props) => <CustomDrawer {...props} />}
screenOptions={{
headerShown: false,
drawerActiveTintColor: secondary,
drawerActiveBackgroundColor: '#fff',
drawerPosition: 'right',
drawerLabelStyle: {
marginLeft: -10,
fontSize: 17,
}
}}
initialRouteName={initialRouteName}
>
{children}
</Drawer.Navigator>
</NavigationContainer>
);
}
export default DrawerNavigator
`
自定义抽屉.js
`
import { View, Text } from 'react-native'
import React, { useState } from 'react'
import {
DrawerContentScrollView,
DrawerItem,
DrawerItemList
} from '@react-navigation/drawer'
import { Colors, Hr, Icon, ProfilePic } from './styles'
//icons
import { Feather, FontAwesome } from "@expo/vector-icons"
import Profile from '../screens/Profile'
import { useNavigation } from '@react-navigation/native';
//colors
const { gray, secondary } = Colors;
const CustomDrawer = (props, { navigation }) => {
const [collapsed, setCollapsed] = useState(false);
return (
<DrawerContentScrollView {...props}>
<Icon>
<ProfilePic
drawer={true}
resizeMode='cover'
source={require('./../assets/img/default.png')}
/>
</Icon>
<Hr drawer={true} />
<View>
<DrawerItem
icon={({ color, size, focused }) => (
<FontAwesome
name='lock'
size={20}
color={!collapsed ? color : secondary}
/>
)}
label={({ focused, color }) =>
<View
style={{ marginLeft: -25, flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
{!collapsed ?
(<>
<Text style={{ fontSize: 17, color, marginHorizontal: 20, }}>
Profile
</Text>
<Feather
name='chevron-down'
size={20}
style={{
marginLeft: 20
}}
/>
</>
) : (<>
<Text style={{ fontSize: 17, color: secondary, marginHorizontal: 20, }}>
Profile
</Text>
<Feather
name='chevron-up'
size={20}
style={{
color,
marginLeft: 20
}}
/>
</>
)
}
</View>
}
onPress={() => { collapsed ? setCollapsed(false) : setCollapsed(true) }}
/>
{collapsed ?
(<DrawerItem
icon={({ color, size, focused }) => (
<Feather name='list' size={20} color={color} style={{ marginLeft: 30 }} />
)}
label={({ focused, color }) => <Text style={{ fontSize: 17, color, marginLeft: -20 }}>My Profile</Text>}
onPress={() => { navigation.navigate('Home') }}
/>) :
""
}
<DrawerItemList {...props} />
</View>
</DrawerContentScrollView>
)
}
export default CustomDrawer
`
Github回购协议:text
我试着直接将导航与drawerContent上的道具一起传递,但它仍然工作
1条答案
按热度按时间bkhjykvo1#
您可以使用
props.navigation.navigate
代替navigation.navigate