Javascript 如何在react native中导航到其他屏幕

当用户单击时，我正在尝试导航到另一个屏幕，其中包含“我的相册”组件中的 在相册上，但我一直收到这个错误

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;

从“React”导入React；
从“react native”导入{View，Image，Text，TouchableWithoutFeedback}；
从“./style”导入样式；
从“../../types”导入{Album，TabOneParamList}；
从'@react-navigation/native'导入{useNavigation}；
//从“../Navigation”导入导航；
导出类型AlbumProps={
专辑：专辑，
}
常量AlbumComponent=（道具：AlbumProps）=>{
const navigation=useNavigation（）；
const onPress=（）=>{
导航。导航（'AlbumScreen'）；
}
返回(
{props.album.artistsHeadline}
);
}
导出默认组件；

这是我的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;

从“React”导入React；
从“react native”导入{View，Text}；
常量屏幕=（）=>(
相册屏幕中的您好
);
导出默认屏幕；

这里还有我的底部选项卡导航，我添加了新创建的相册屏幕，就像添加主屏幕一样

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

导入{
离子图标，
恩蒂波，
邪恶的偶像，
物质通讯员，
丰塔威索5，
真棒
}来自“@expo/vector icons”；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从'@react navigation/stack'导入{createStackNavigator}；
从“React”导入*作为React；
从“../constants/Colors”导入颜色；
从“../hooks/useColorScheme”导入useColorScheme；
从“../screens/HomeScreen”导入TabOneScreen；
从“../screens/AlbumScreen”导入AlbumScreen；
从“../screens/TabTwoScreen”导入TabTwoScreen；
从“../types”导入{BottomTabParamList，TabOneParamList，TabTwoParamList}；
const BottomTab=createBottomTabNavigator（）；
导出默认函数BottomTabNavigator（）{
const colorScheme=useColorScheme（）；
返回(
,
}}
/>
,
}}
/>
,
}}
/>
,
}}
/>
);
}
//每个选项卡都有自己的导航堆栈，您可以在此处阅读有关此模式的更多信息：
// https://reactnavigation.org/docs/tab-based-navigation#a-每个选项卡的堆栈导航器
const TabOneStack=createStackNavigator（）；
函数TabOneNavigator（）{
返回(
);
}
const TabTwoStack=createStackNavigator（）；
函数TabTwoNavigator（）{
返回(
);
}

---

这是我正在尝试做的事情的图片。单击此图像右侧的相册后，用户直接进入另一个屏幕，但我不断收到突出显示的错误。您正在导航到一个名为“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;

从“React”导入React；
从“react native”导入{View，Image，Text，TouchableWithoutFeedback}；
从“./style”导入样式；
从“../../types”导入{Album，TabOneParamList}；
从'@react-navigation/native'导入{useNavigation}；
//从“../Navigation”导入导航；
导出类型AlbumProps={
专辑：专辑，
}
常量AlbumComponent=（道具：AlbumProps）=>{
const navigation=useNavigation（）；
const onPress=（）=>{
导航。导航（“主页”）；
//这是错误。正如您所看到的，您返回的底部导航器中不存在“AlbumScreen”。因此，请将“AlbumScreen”替换为“Home”，或者在底部导航器中放置另一个名为“AlbumScreen”的路由
}
返回(
{props.album.artistsHeadline}
);
}
导出默认组件；

但是我创建了这个屏幕但是我创建了这个屏幕是的，你已经创建了

AlbumScreen.js

但是它不在

部分检查一下。。因此，导航的可能路径是

主页

存储

库

配置文件

我建议您在您的案例中使用

堆栈导航器

。。。看见