在导航容器内的堆栈之间导航

Question

我正在使用 Expo 构建一个 React Native 应用程序，但我找不到从我的 App.js

中调用 Stack 内的导航功能的方法

这是我的 App.js（查看 Home Stack 中的 TouchableOpacity）

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Login from "./src/screens/Login/Login";
import Home from "./src/screens/Home/Home";
import Profile from "./src/screens/Profile/Profile";
import { Image, Text, TouchableOpacity } from "react-native";
import profileIcon from "./assets/img/profile.jpg";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer style={{ position: "relative" }}>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ title: "Login", headerShown: false }}
        />
        <Stack.Screen
          name="Home"
          component={Home}
          options={{
            title: "LOCOMOOV",
            headerRight: () => (
              <TouchableOpacity onPress={() => { >>> FUNCTION TO NAVIGATE HERE <<< }} style={{zIndex: 1, position: 'absolute', right: 0}}>
                <Image
                  source={profileIcon}
                  style={{ width: 30}}
                  resizeMode="contain"
                />
              </TouchableOpacity>
            ),
            headerStyle: {
              backgroundColor: "#092969",
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              fontWeight: "bold",
            },
            headerBackTitle: "Sair",
          }}
        />
        <Stack.Screen
          name="Profile"
          component={Profile}
          options={{ title: "Perfil", headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在App.js外面很容易做到，调用导航道具，但我不知道如何在这里做到

Answer 1

导航作为道具传递给堆栈屏幕选项：

          options={({ navigation }) => ({
            headerRight: () => (
              <TouchableOpacity onPress={() => navigation.navigate('Profile')}} style={{zIndex: 1, position: 'absolute', right: 0}}>
                <Image
                  source={profileIcon}
                  style={{ width: 30}}
                  resizeMode="contain"
                />
              </TouchableOpacity>
            ),
          })}

Answer 2

export default function NavigatorRoutes({navigation}) {
  return (
    <NavigationContainer style={{ position: "relative" }}>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ title: "Login", headerShown: false }}
        />
        <Stack.Screen
          name="Home"
          component={Home}
          options={{
            title: "LOCOMOOV",
            headerRight: () => (
              <TouchableOpacity onPress={() => navigation.navigate('Profile')}} style={{zIndex: 1, position: 'absolute', right: 0}}>
                <Image
                  source={profileIcon}
                  style={{ width: 30}}
                  resizeMode="contain"
                />
              </TouchableOpacity>
            ),
            headerStyle: {
              backgroundColor: "#092969",
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              fontWeight: "bold",
            },
            headerBackTitle: "Sair",
          }}
        />
        <Stack.Screen
          name="Profile"
          component={Profile}
          options={{ title: "Perfil", headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在导航容器内的堆栈之间导航

Navigate between Stacks inside Navigation Container

react-native

expo

react-navigation