我正在使用 Expo 構建一個 React Native 應用程式，但我找不到從我的 App.js 呼叫堆疊內的導航功能的方法
這是我的 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 之外很容易做到這一點，呼叫導航道具，但我不知道如何在這里做到
uj5u.com熱心網友回復：
導航作為道具傳遞給堆疊螢屏選項：
options={({ navigation }) => ({
headerRight: () => (
<TouchableOpacity onPress={() => navigation.navigate('Profile')}} style={{zIndex: 1, position: 'absolute', right: 0}}>
<Image
source={profileIcon}
style={{ width: 30}}
resizeMode="contain"
/>
</TouchableOpacity>
),
})}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/464899.html