错误 任何导航器均未处理有效负载 {"name":"SettingsScreen"} 的操作“NAVIGATE”

Question

我刚刚开始学习并使用 React 创建移动应用程序。但我被困在导航选项卡上，暂时找不到解决方案。

我的应用程序有一个底栏，上面有 3 个按钮。当我尝试从主页导航到“设置屏幕”时，我收到了来自主题的错误。

我的代码是： TabNavigator.tsx

// TabNavigator.tsx
import React from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import HomeScreen from '../app/Screens/HomeScreen';
import SettingsScreen from '../app/Screens/SettingsScreen';
import LogOutScreen from '../app/Screens/LogoutScreen';

const Tab = createMaterialTopTabNavigator();

const TabNavigator: React.FC = () => (
  <Tab.Navigator
    screenOptions={{
      tabBarStyle: { backgroundColor: 'black' },
      tabBarLabelStyle: { color: 'white' },
    }}
  >
    <Tab.Screen name="HomeScreen" component={HomeScreen} />
    <Tab.Screen name="SettingsScreen" component={SettingsScreen} />
    <Tab.Screen name="LogOutScreen" component={LogOutScreen} />
  </Tab.Navigator>
);

export default TabNavigator;

应用程序.tsx

// App.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppBar from './AppBar';
import TabNavigator from './components/TabNavigator';

const App: React.FC = () => {
  return (
    <NavigationContainer>
      <TabNavigator />
    </NavigationContainer>
  );
};

export default App;

AppBar.tsx

// AppBar.tsx
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { RootStackParamList } from './assets/types';
import { FontAwesome } from '@expo/vector-icons';

type NavigationProp = StackNavigationProp<RootStackParamList>;

const AppBar: React.FC = () => {
  const navigation = useNavigation<NavigationProp>();
  return (
    <View style={styles.appBar}>
      <View style={styles.buttonContainer}>
        <TouchableOpacity style={styles.button}>
          <FontAwesome name="home" size={20} color="white" />
          <Text style={styles.buttonText}>Home</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={() => navigation.navigate('SettingsScreen')}>
          <FontAwesome name="cog" size={20} color="white" />
          <Text style={styles.buttonText}>Settings</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button}>
          <FontAwesome name="sign-out" size={20} color="white" />
          <Text style={styles.buttonText}>Logout</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  appBar: {
    backgroundColor: 'black',
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'space-between', // Modifică acest stil pentru aliniere
    alignItems: 'center',
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    flex: 1,
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    marginHorizontal: 10,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    marginLeft: 5,
  },
});

export default AppBar;

设置屏幕.tsx

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

const SettingsScreen: React.FC<any> = ({ route }) => {
  return (
  <View style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.welcomeText}>This is the Settings Screen</Text>
      </View>
    <AppBar/>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcomeText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default SettingsScreen;

应用程序的屏幕截图是

有错误的屏幕截图

Answer 1

更改

SettingsScreen

如下

type NavigationProp = StackNavigationProp<RootStackParamList>;

export const SettingsScreen: FunctionComponent<
  NavigationProp<"SettingsScreen">
> = () => {

 ...

}

这样的东西应该有效。问题是，即使你说出它是哪个组件，你的导航道具也没有在组件本身定义。