设置页跳转登录注册页报‘undefined is not a function’错误求助

核心错误原因 #

你遇到的undefined is not a function报错，本质是组件未正确获取navigation对象：在Settings组件中，你直接将参数当作navigation使用，但React Navigation传递给组件的是包含navigation的props对象，必须通过解构才能正确提取。

具体修复步骤 #

1. 修正Settings组件的navigation获取方式 #

将：

const Settings = (navigation) => {

修改为：

const Settings = ({ navigation }) => {

通过解构props，才能正确拿到navigation对象并调用navigate方法。

2. 修复LogInSignUp组件的标签错误 #

React Native不支持Web端的<div>标签，替换为RN原生组件：

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

const LogInSignUp = () => {
  return (
    <View style={styles.container}>
      <Text>LogInSignUp</Text>
    </View>
  )
}

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

export default LogInSignUp

3. 优化App.js的栈导航配置 #

你的App.js中重复注册了Tabs作为Home和Settings的组件，属于冗余配置。Tabs作为底部导航本身已包含Settings页面，栈导航只需保留Home（对应Tabs）和LogInSignUp即可：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Tabs from './navigation/tabs';
import "react-native-url-polyfill/auto"
import LogInSignUp from './SettingsScreen/LogInSignUp';

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
          <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Home" component={Tabs} />
            <Stack.Screen name="LogInSignUp" component={LogInSignUp}/>
          </Stack.Navigator>
        </NavigationContainer>
    );
};

export default App;

4. 确认Tabs导航的嵌套逻辑 #

确保你的Tabs组件已正确配置Settings页面的路由，这样Settings页面才能继承栈导航的navigation上下文，实现页面跳转。

验证修复 #

完成以上修改后，点击Settings页面的按钮即可正常跳转到LogInSignUp页面，不会再出现undefined is not a function报错。

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