React Native添加+按钮跳转报错：NAVIGATE动作未被处理

问题概述 #

在React Native项目中，尝试在StorageListScreen页面右下角添加+按钮，点击后跳转到包含两个输入字段的StorageScreen表单页面，但点击按钮时触发导航错误。

错误信息 #

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

Do you have a screen named 'StorageScreen'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

解决步骤 #

1. 修复导航错误 #

错误核心是StorageScreen未在导航器中注册。当前底部导航器直接挂载StorageListScreen，需为其嵌套栈导航器，将StorageScreen加入导航栈。

修改底部导航器代码（AppNavigator.js）：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from '../screens/HomeScreen';
import YourFood from '../screens/YourFood';
import StorageListScreen from '../screens/StorageListScreen';
import StorageScreen from '../screens/StorageScreen';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();
const StorageStack = createNativeStackNavigator();

// 定义Storage专属栈导航
function StorageStackScreen() {
  return (
    <StorageStack.Navigator>
      <StorageStack.Screen 
        name="StorageList" 
        component={StorageListScreen}
        options={{ title: "List of Storages" }}
      />
      <StorageStack.Screen 
        name="StorageScreen" 
        component={StorageScreen}
        options={{ title: "Add Storage" }}
      />
    </StorageStack.Navigator>
  );
}

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Storage"
        component={StorageStackScreen}
        options={{
          tabBarLabel: 'Storage',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="fridge-variant" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Your Food"
        component={YourFood}
        options={{
          tabBarLabel: 'Food',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="food-variant" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}
export default MyTabs;

2. 调整按钮到页面右下角 #

修改StorageListScreen.js，通过绝对定位将按钮固定在右下角，同时移除冗余的导航器导入：

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import StorageScreen from './StorageScreen';

const StorageListScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>List of Storages</Text>

      {/* 存储列表展示区域 */}

      <View style={styles.addButtonContainer}>
        <Button
          title="+"
          onPress={() => navigation.navigate('StorageScreen')}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  header: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 16,
  },
  addButtonContainer: {
    position: 'absolute',
    bottom: 30,
    right: 30,
  }
});

export default StorageListScreen;

说明 #

• 嵌套栈导航后，StorageListScreen可通过navigation.navigate('StorageScreen')正确跳转目标页面
• 绝对定位样式确保按钮固定在页面右下角，不受内容滚动影响

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