【发布时间】：2021-06-03 04:16:29
【问题描述】：
我目前在我的应用上使用堆栈导航，但我决定为用户菜单增加一个抽屉。
我设法在我的页面中插入了抽屉，但其中一些是 MapView 内容，因此用户无法真正从屏幕上拖动菜单... 所以我决定实现一个按钮来调用 ToggleDrawer 函数，在documentation 中有介绍。但我得到了错误：
TypeError：navigation.ToggleDrawer 不是函数。 （在'navigation.ToggleDrawer()'中，'navigation.ToggleDrawer'是未定义的）
这是我尝试在其中插入按钮的地图屏幕，如下所示：
onPress={() => navigation.ToggleDrawer()}
如果我从 useNavitation() 中删除 <any>，我会收到以下信息：
Property 'ToggleDrawer' does not exist on type 'NavigationProp
export default function IncidentsMap() {
const navigation = useNavigation<any>();
return (
<View style={styles.container}>
{typeof location?.coords.latitude == 'number' ?
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
>
<Callout tooltip={true} onPress={handleNavigateToIncidentDetails}>
<View style={styles.calloutContainer}>
<Text style={styles.calloutText}>Enchente rasa</Text>
</View>
</Callout>
</Marker>
</MapView>
<View style={styles.footer}>
<Text style={styles.footerText}>Reporte um incidente</Text>
<RectButton style={styles.createFloodButton} onPress={handleNavigateToCreateIncident}>
<Feather name='plus' size={20} color={'#fff'}/>
</RectButton>
</View>
<View style={styles.menuContainer}>
<RectButton style={styles.menuButton} onPress={() => navigation.ToggleDrawer()}>
<Feather name='menu' size={20} color={'#fff'}/>
</RectButton>
</View>
</View> : <View style={styles.container}>
<Text>Carregando ... Carregando ... Carregando ... Carregando ... Carregando ...
Carregando </Text>
</View>}
</View>
);
}
这是我的路线文件：
export default function Routes() {
return(
<NavigationContainer>
<Navigator screenOptions={{headerShown: false}}>
<Screen name={'MyDrawer'} component={DrawerImported}/>
{/*<Screen name="GetLocationTest" component={GetLocationTest}/>*/}
<Screen name="WelcomePage" component={WelcomePage}/>
<Screen name="WelcomePageStep2" component={WelcomePageStep2}/>
<Screen name="IncidentsMap" component={IncidentsMap}/>
<Screen name="IncidentDetails"
component={IncidentDetails}
options={{
headerShown: true,
header: () => <Header showCancel={false} title="Incidente"/>
}}
/>
<Screen name="SelectIncidentLocation" component={SelectIncidentLocation}
options={{
headerShown: true,
header: () => <Header title="Selecione no Mapa" showCancel={false}/>
}}
/>
<Screen name="IncidentData" component={IncidentData}/>
<Screen name="Profile" component={Profile}/>
<Screen name="Settings" component={Settings}
options={{
headerShown: true,
header: () => <Header title="Configurações" showCancel={false}/>
}}
/>
</Navigator>
</NavigationContainer>
)
}
这是我的抽屉文件：
interface Props {
navigation: any
}
export function DrawerImported(props) {
const paperTheme = useTheme();
function CustomDrawerContent(props) {
return (
<View style={{flex:1}}>
<DrawerContentScrollView {...props}>
<View style={styles.drawerContent}>
<View style={styles.userInfoSection}>
<View style={{flexDirection:'row',marginTop: 15}}>
<Avatar.Image
source={{
uri: 'https://avatars.githubusercontent.com/u/47571680?v=4'
}}
size={50}
/>
<View style={{marginLeft:15, flexDirection:'column'}}>
<Title style={styles.title}>Vinícius Melo</Title>
</View>
</View>
</View>
<View style={styles.drawerSection}>
<DrawerItem
icon={({color, size}) => (
<Feather
name="map"
color={color}
size={size}
/>
)}
label="Mapa da região"
onPress={() => {props.navigation.navigate('IncidentsMap')}}
/>
<DrawerItem
icon={({color, size}) => (
<Feather
name="user"
color={color}
size={size}
/>
)}
label="Profile"
onPress={() => {props.navigation.navigate('Profile')}}
/>
<DrawerItem
icon={({color, size}) => (
<Feather
name="settings"
color={color}
size={size}
/>
)}
label="Configurações"
onPress={() => {props.navigation.navigate('Settings')}}
/>
<DrawerItem
icon={({color, size}) => (
<Feather
name="alert-triangle"
color={color}
size={size}
/>
)}
label="Reportar Bug"
onPress={() => {props.navigation.navigate('BugReport')}}
/>
</View>
</View>
</DrawerContentScrollView>
<View style= {styles.bottomDrawerSection}>
<DrawerItem
icon={({color, size}) => (
<Feather
name="log-out"
color={color}
size={size}
/>
)}
label="Log Out"
onPress={() => {}}
/>
</View>
</View>
);
}
const Drawer = createDrawerNavigator();
return (
<Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Map" component={IncidentsMap}/>
<Drawer.Screen name="Settings" component={Settings}/>
<Drawer.Screen name="Profile" component={Profile}/>
<Drawer.Screen name="BugReport" component={BugReport}/>
</Drawer.Navigator>
);
}
function MyDrawer() {
return(
<MyDrawer/>
);
}
我应该如何在我的屏幕上调用这个抽屉？
【问题讨论】：
标签： typescript react-native navigation-drawer react-typescript