如何導航到 react-native 中的另一個屏幕

Question

當用戶單擊相冊時，我正在嘗試使用相冊組件導航到另一個屏幕，但我不斷收到此錯誤

The action 'NAVIGATE' with payload {"name":"AlbumScreen"} was not handled by any navigator.

下面是我的代碼和我的嘗試

導航->相冊->index.tsx

import React from 'react';
import { View, Image, Text, TouchableWithoutFeedback } from 'react-native';
import styles from './style';
import { Album, TabOneParamList } from '../../types';
import { useNavigation } from '@react-navigation/native';
// import Navigation from '../navigation';

export type AlbumProps = {
    album: Album,

}

const AlbumComponent = (props: AlbumProps) => {

    const navigation = useNavigation();
    const onPress = () => {

        navigation.navigate('AlbumScreen');
    }



    return (
        <TouchableWithoutFeedback onPress={onPress}>
            <View style={styles.container}>
                <Image source={{ uri: props.album.imageUri }} style={styles.image} />
                <Text style={styles.text}>{props.album.artistsHeadline}</Text>
            </View>
        </TouchableWithoutFeedback>
    );
}






export default AlbumComponent;

這是我的 AlbumScreen.tsx 這也是我希望用戶在單擊專輯后移動到的屏幕

import React from 'react';

import { View, Text } from 'react-native';

const AlbumScreen = () => (
    <View>
        <Text style={{ color: 'white' }} >Hello from Album Screen</Text>
    </View>
);



export default AlbumScreen;

這也是我的 BottomTabNavigation，我添加了新創建的 AlbumScreen，就像添加 HomeScreen 一樣

import {
  Ionicons,
  Entypo,
  EvilIcons,
  MaterialCommunityIcons,
  FontAwesome5,
  FontAwesome
} from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';

import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';
import TabOneScreen from '../screens/HomeScreen';
import AlbumScreen from '../screens/AlbumScreen';
import TabTwoScreen from '../screens/TabTwoScreen';
import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types';

const BottomTab = createBottomTabNavigator<BottomTabParamList>();

export default function BottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
    <BottomTab.Navigator
      initialRouteName="Home"
      tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
      <BottomTab.Screen
        name="Home"
        component={TabOneNavigator}
        options={{
          tabBarIcon: ({ color }) => <Entypo name="home" size={30} style={{ marginBottom: -3 }} color={color} />,
        }}
      />
      <BottomTab.Screen
        name="store"
        component={TabTwoNavigator}
        options={{
          tabBarIcon: ({ color }) => <MaterialCommunityIcons name="store" size={30} style={{ marginBottom: -3 }} color={color} />,
        }}
      />
      <BottomTab.Screen
        name="Library"
        component={TabTwoNavigator}
        options={{
          tabBarIcon: ({ color }) => <Ionicons name="library-outline" size={30} style={{ marginBottom: -3 }} color={color} />,
        }}
      />
      <BottomTab.Screen
        name="Profile"
        component={TabTwoNavigator}
        options={{
          tabBarIcon: ({ color }) => <FontAwesome name="user-circle" size={28} style={{ marginBottom: -3 }} color={color} />,
        }}
      />
    </BottomTab.Navigator>
  );
}



// Each tab has its own navigation stack, you can read more about this pattern here:
// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
const TabOneStack = createStackNavigator<TabOneParamList>();

function TabOneNavigator() {
  return (
    <TabOneStack.Navigator>
      <TabOneStack.Screen
        name="TabOneScreen"
        component={TabOneScreen}
        options={{ headerTitle: 'Home' }}
      />
       <TabOneStack.Screen
        name="AlbumScreen"
        component={AlbumScreen}
        options={{ headerTitle: 'Album' }}
      />
    </TabOneStack.Navigator>
  );
}

const TabTwoStack = createStackNavigator<TabTwoParamList>();

function TabTwoNavigator() {
  return (
    <TabTwoStack.Navigator>
      <TabTwoStack.Screen
        name="TabTwoScreen"
        component={TabTwoScreen}
        options={{ headerTitle: 'Tab Two Title' }}
      />
    </TabTwoStack.Navigator>
  );
}

這是我想要做的圖片，單擊此圖片右側的相冊后，用戶將直接進入另一個屏幕，但我不斷收到突出顯示的錯誤我的錯誤

Answer 1

您正在導航到名稱為“AlbumScreen”的屏幕，該屏幕不存在。 這就是您收到此錯誤的原因。

import React from 'react';
import { View, Image, Text, TouchableWithoutFeedback } from 'react-native';
import styles from './style';
import { Album, TabOneParamList } from '../../types';
import { useNavigation } from '@react-navigation/native';
// import Navigation from '../navigation';

export type AlbumProps = {
    album: Album,
}

const AlbumComponent = (props: AlbumProps) => {
    const navigation = useNavigation();
    const onPress = () => {
        navigation.navigate('Home'); 
        // Here was the error..As you can see "AlbumScreen" does not exist in Bottom Navigator that you are returning. So Either replace "AlbumScreen" with "Home" or place another route with name "AlbumScreen" in Bottom Navigator
    }
    return (
        <TouchableWithoutFeedback onPress={onPress}>
            <View style={styles.container}>
                <Image source={{ uri: props.album.imageUri }} style={styles.image} />
                <Text style={styles.text}>{props.album.artistsHeadline}</Text>
            </View>
        </TouchableWithoutFeedback>
    );
}

export default AlbumComponent;