我一直在努力让goBack()在抽屉式导航器中工作,我甚至不确定我的整个方法是否正确。我想要一个独立于主屏幕的侧菜单,因为侧菜单只处理全局设置、注销等。
在下面的示例中,在“真实的”登录时,初始路由名称将被设置为“屏幕A”或“屏幕B”。(因此,我可以在屏幕A或屏幕B上着陆。)如果我着陆在屏幕A上,我将可以选择导航到屏幕B,并且可能希望返回到屏幕A。如果我着陆在屏幕B上,我将永远不需要转到屏幕A。我不想在侧边菜单中看到A或B,因为它们与全局设置无关。我可能会从B导航到其他地方。侧边菜单应该在屏幕A和屏幕B中工作。
这里的问题是,无论我是在A还是B上,或者我是否导航到侧边菜单(Account或Settings),goBack()总是带我到堆栈中的第一个屏幕(AccountScreen),而不是我刚刚离开的屏幕。
任何感激的帮助。
import React from 'react';
import { Text, View, Button, Alert, TextInput } from 'react-native';
import { NavigationContainer, DrawerActions, getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {
DrawerItem,
DrawerItemList,
DrawerContentScrollView,
DrawerToggleButton,
} from '@react-navigation/drawer';
import { SignInScreen } from './ui/signinscreen.js';
import { AccountScreen } from './ui/accountscreen.js';
import { SettingsScreen } from './ui/settingsscreen.js';
import { AScreen } from './ui/ascreen.js';
import { BScreen } from './ui/bscreen.js';
const Drawer = createDrawerNavigator();
const HomeDrawer = () => {
return (
<Drawer.Navigator
screenOptions={{
headerShown: true,
headerLeft: false,
headerRight: () => <DrawerToggleButton />,
}}
initialRouteName={"Screen A"}
>
<Drawer.Screen name="Account" component={AccountScreen}
options={({ route, navigation }) => (
{
headerLeft: () => ( <Button title="< Back" onPress={() => navigation.goBack() } />),
}
)}
/>
<Drawer.Screen name="Settings" component={SettingsScreen}
options={({ route, navigation }) => (
{
headerLeft: () => ( <Button title="< Back" onPress={() => navigation.goBack() } />),
}
)}
/>
<Drawer.Screen name="Screen A" component={AScreen}
options={{
drawerItemStyle: { height: 0 }
}}
/>
<Drawer.Screen name="Screen B" component={BScreen}
options={({ route, navigation }) => (
{
headerLeft: () => ( <Button title="< Back" onPress={() => navigation.goBack() } />),
drawerItemStyle: { height: 0 }
}
)}
/>
</Drawer.Navigator>
);
};
const Stack = createStackNavigator();
const App = () => {
const [isAuthenticated, setIsAuthenticated] = React.useState(false);
const handleSignIn = () => {
// Real sign in mechanism
setIsAuthenticated(true);
};
return (
<NavigationContainer>{
<Stack.Navigator initialRouteName="Sign In">
{isAuthenticated ? (
<Stack.Group screenOptions={{ headerShown: false }}>
<Stack.Screen name="Home" component={HomeDrawer} />
</Stack.Group>
) : (
<Stack.Group screenOptions={{ headerShown: true }}>
<Stack.Screen name="Sign In" options={{ title: "Nav Test" }}>
{(props) => (
<SignInScreen {...props} onSignIn={handleSignIn} />
)}
</Stack.Screen>
</Stack.Group>
)}
</Stack.Navigator>
}</NavigationContainer>
);
}
export default App;
1条答案
按热度按时间b1zrtrql1#
下面是一个简单例子,它在屏幕中工作,而不是在标题中
你可以看到希望这能帮到你
如果您像这样使用自定义标题,
功能详细信息屏幕
应用程序js