React Native点击按钮跳转失败：未识别DetailsScreen

嘿，我来帮你搞定这个导航报错的问题！你遇到的错误原因很明确：你没有把DetailsScreen注册到任何导航器的路由列表里，React Navigation的导航系统根本不知道这个页面存在，所以当你调用navigate('DetailsScreen')时就会报错。

下面是具体的解决步骤，一步步来：

1. 完善DetailsScreen的代码 #

首先确保你的DetailsScreen组件是完整的，并且正确导出：

// components/DetailsScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';

export default function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      {/* 加个返回按钮更友好 */}
      <Button title="回到相册列表" onPress={() => navigation.goBack()} />
    </View>
  );
}

2. 用Stack导航器嵌套Tab页面 #

因为你需要从AlbumScreen跳转到新页面，所以需要给AlbumScreen套一个Stack导航器，把AlbumScreen和DetailsScreen都注册到这个栈里。修改你的App.js：

首先导入必要的组件和DetailsScreen：

// App.js 导入部分补充
import { createStackNavigator } from '@react-navigation/stack';
import DetailsScreen from "./components/DetailsScreen";

然后创建一个专门的Album栈组件：

const Stack = createStackNavigator();

// 定义包含Album和Details的栈
function AlbumStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Album" component={AlbumScreen} options={{ title: '我的相册' }} />
      <Stack.Screen name="DetailsScreen" component={DetailsScreen} options={{ title: '相册详情' }} />
    </Stack.Navigator>
  );
}

最后修改Tab导航器的配置，把原来的AlbumScreen替换成我们刚创建的AlbumStack：

<Tab.Screen 
  name="Album" 
  component={AlbumStack} // 这里换成AlbumStack
  options={{ 
    tabBarLabel: 'My albums', 
    tabBarIcon: ({ color }) => ( 
      <MaterialCommunityIcons name="animation" color={color} size={26} /> 
    ), 
  }} 
/>

3. 修正AlbumScreen的冗余导入 #

你的AlbumScreen里导入了Navigator和NavigationContainer，这两个是不需要的，删掉它们，同时补充样式（不然你的按钮可能不会居中）：

// components/AlbumScreen.js
import React from 'react';
import { Button, SafeAreaView, StyleSheet } from 'react-native';

export default class AlbumScreen extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Button title="查看详情" onPress={() => this.props.navigation.navigate('DetailsScreen')} />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

现在再点击按钮，就能正常跳转到DetailsScreen了！

核心原因回顾 #

React Navigation的导航系统只会识别已经在导航器中注册过的路由名称，你之前的Tab导航器只配置了Home和Album两个页面，DetailsScreen不在路由列表里，自然找不到。通过嵌套Stack导航器，我们给Album页面增加了自己的页面栈，让导航系统能找到DetailsScreen。

内容的提问来源于stack exchange，提问作者Frankie