ExpoReact Antive stack Headeright与自定义组件不会使用link

Question

Link

在第一个示例中起作用，但是在

headerRight

中没有。我检查了

栈文档

，但没有说关于在

headerRight

中使用重定向的说法。但是它确实说接受了反应组件。 Link在

Stack

之外的工作，我在

index.js

中也有一个菜单，其中有更多链接，并且所有链接都可以在堆栈功能上工作。

您可以帮助我了解为什么

headerRight

按钮可能无法正常工作？谢谢您的帮助。

_layout.js

import { Stack, Link } from "expo-router";
import { View, Text, StyleSheet, Pressable } from "react-native";

export default function Layout() {
  return (
    <View className="flex-1 bg-black">
      <Link href="/about" asChild>  <-- Working
        <Pressable>
          <Text style={styles.buttonText}>About</Text>
        </Pressable>
      </Link>
      <Stack
        screenOptions={{
          headerStyle: {
            backgroundColor: "#888",
          },
          headerTintColor: "#fff",
          headerTitleStyle: {
            fontWeight: "bold",
          },
          headerRight: () => (
            <Link href="/about" asChild> <-- Does not work
              <Pressable>
                <Text style={styles.buttonText}>About</Text>
              </Pressable>
            </Link>
          ),
        }}
      >
        <Stack.Screen name="index" options={{ title: "Home" }} />
        <Stack.Screen name="about" options={{ title: "About" }} />
      </Stack>
    </View>
  );
}

about.js

import { ScrollView, Text } from "react-native";

export default function About() {
  return (
      <Text classname="text-white text-white/900" style={{ marginBottom: 40 }}>
        Lorem ipsum..
      </Text>     
  );
}

index.js

import { useCameraPermissions } from "expo-camera";
import { Link } from "expo-router";
import { useEffect, useState } from "react";
import { StyleSheet, Text } from "react-native";
import { View, TouchableOpacity } from "react-native";

export default function Index() {
  return (
       <View className=" bg-orange-300 items-center justify-center">          
          <Link href="/camera" asChild>
            <TouchableOpacity style={styles.button}>
              <Text style={styles.buttonText}>Escaner</Text>
            </TouchableOpacity>
          </Link>
      ...many other...
          <Link href="/about" style={styles.buttonText} asChild>
            <TouchableOpacity style={styles.button}>
              <Text style={styles.buttonText}>About</Text>
            </TouchableOpacity>
          </Link>
        </View> 
  );
}

package.json

{
  "name": "codebar-app",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    ...
  },
  "dependencies": {    
    "@react-native-async-storage/async-storage": "^2.1.2",
    "@react-native-picker/picker": "2.9.0",
    "expo": "~52.0.19",
    "expo-camera": "~16.0.10",
    "expo-constants": "~17.0.8",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.19",
    "expo-status-bar": "~2.0.1",
    "nativewind": "^2.0.11",
    "react": "18.3.1",
    "react-native": "0.76.5",    
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0",    
    "react-native-web": "~0.19.13"
  },

这是对本机expo

的开放问题，它可能来自

。

基本上，

Answer 1

和其他

Link没有内部工作。 Pressable可能行不通，但我看到人们使用回调可以通过可压制和导航进行操作。

他们正在使用

Link