[英]React-Native goBack() not navigating to previous screen
I've been struggling to get goBack()
working inside a drawer navigator and I'm not even sure my whole approach here is correct.我一直在努力让goBack()
在抽屉导航器中工作,我什至不确定我在这里的整个方法是否正确。 I want a side menu that functions independently from the main screens, as the side menu will only handle global settings, sign-out, etc.我想要一个独立于主屏幕运行的侧边菜单,因为侧边菜单只能处理全局设置、注销等。
In the example below, at “real” sign-in, initialRouteName will be set to either “Screen A” or “Screen B”.在下面的示例中,在“真实”登录时,initialRouteName 将设置为“屏幕 A”或“屏幕 B”。 (I could therefore land on either Screen A or Screen B.) If I land on A I'll have the option to navigate to B and may wish to return to A. If I land on B I'll never need to go to A. I do not want to see A or B in the side menu as they are nothing to do with the global settings. (因此我可以登陆屏幕 A 或屏幕 B。)如果我登陆 A,我可以选择导航到 B 并可能希望返回 A。如果我登陆 B,我将永远不需要 go 到A. 我不想在侧边菜单中看到 A 或 B,因为它们与全局设置无关。 From B I'll potentially navigate elsewhere.从 B 我可能会导航到其他地方。 The side menu should work from Screen A and Screen B.侧面菜单应该在屏幕 A 和屏幕 B 中起作用。
My problem here is, regardless of whether I land on A or B, or whether I navigate to the side menu (Account or Settings), goBack() always takes me to the first screen in the stack (AccountScreen) and not to the screen I've just come from.我的问题是,无论我是登陆 A 还是 B,或者我是否导航到侧面菜单(帐户或设置),goBack() 总是将我带到堆栈中的第一个屏幕(AccountScreen)而不是屏幕我刚从
Any help is gratefully received:非常感谢收到任何帮助:
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;
here is simple example it's working in screen not header这是一个简单的例子,它在屏幕上工作,而不是 header
you can see hope this will help you你可以看到希望这会帮助你
if you use customs header you use like this如果您使用海关 header,您可以这样使用
function DetalisScreen function 详细屏幕
function DetailsScreen({ navigation }) {
return (
<>
<View
style={{
backgroundColor: 'white',
width: '100%',
height: 50,
flexDirection: 'row',
}}>
<TouchableOpacity
onPress={()=>navigation.goBack()}
>
<Image
source={{
uri: 'https://cdn-icons-png.flaticon.com/128/507/507257.png',
}}
style={{ width: 30, height: 30, marginTop: 7, marginLeft: 3 }}
/>
</TouchableOpacity>
<Text
style={{
fontSize: 20,
marginTop: 7,
marginLeft: 3,
fontWeight: 'bold',
}}>
Home
</Text>
</View>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button title="Go to Details" onPress={() => navigation.goBack()} />
</View>
</>
);
}
App.js应用程序.js
import * as React from "react";
import { Button, View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate("Details")}
/>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Details Screen</Text>
<Button title="Go to Details" onPress={() => navigation.goBack()} />
</View>
);
}
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
It was unbelievable simple in the end so for the benefit of anyone else who finds themselves here, all I had to do was add backBehavior="history"
to the HomeDrawer screenOptions.最后它非常简单,所以为了发现自己在这里的任何其他人的利益,我所要做的就是将backBehavior="history"
添加到 HomeDrawer screenOptions。
I found the reference here - https://reactnavigation.org/docs/bottom-tab-navigator/#backbehavior but it seems to equally apply to drawer navigation.我在这里找到了参考 - https://reactnavigation.org/docs/bottom-tab-navigator/#backbehavior但它似乎同样适用于抽屉导航。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.