React-本机goBack()未导航到上一屏幕

mbjcgjjk  于 2023-01-05  发布在  React
关注(0)|答案(1)|浏览(231)

我一直在努力让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;
b1zrtrql

b1zrtrql1#

  • 如果你在标题中使用后退按钮,我就不知道了
  • 但是你可以做一个自定义的样式和添加图标,你可以添加导航。goback()在这个自定义按钮,那么它的工作为您服务

下面是一个简单例子,它在屏幕中工作,而不是在标题中
你可以看到希望这能帮到你
如果您像这样使用自定义标题,

功能详细信息屏幕

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>
    </>
  );
}

应用程序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;

相关问题