Javascript 为什么在App.js中未定义React Native App.js导航？

导出默认函数App（{navigation}）

有一个函数以开头并包含

但是当我想使用导航功能并在onPress中使用“navigation.navigate（'Lead'）时

TypeError:undefined不是一个对象

我有一个错误。我的英语不是很好。请在这个主题上帮助我。现在我正在为您添加示例代码

import * as React from 'react';
import { StyleSheet, AsyncStorage, Alert, View, Image, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { ApplicationProvider, Layout, Input, Button, Text, Spinner, IconRegistry, Icon } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import * as eva from '@eva-design/eva';
import LinkingConfiguration from './navigation/LinkingConfiguration';
import * as axios from 'axios';
import Base64 from './components/Base64';
import LeadScreen from './screens/LeadScreen';
import AddLeadScreen from './screens/AddLeadScreen';
import TabBarIcon from './components/TabBarIcon';
import HomeScreen from './screens/HomeScreen';
import CampaignsScreen from './screens/CampaignsScreen';
import MenuScreen from './screens/MenuScreen';

const Stack = createStackNavigator();

export default function App({ navigation }) {  
  const logout = async () => {
    await AsyncStorage.removeItem('token');    
    dispatch({ type: 'SIGN_OUT' });
  };
  
  return (    
    <>
      <IconRegistry icons={EvaIconsPack} />
      <ApplicationProvider {...eva} theme={eva.light}>        
          <Layout style={styles.container}>
            <AuthContext.Provider value={authContext}>
              <NavigationContainer linking={LinkingConfiguration}>
                <Stack.Navigator>
                  {state.isLoading ? (
                    // We haven't finished checking for the token yet
                    <Stack.Screen name="Splash" component={SplashScreen} options={{ headerShown: false }} /> 
                    ) : state.token == null ? (
                    // No token found, user isn't signed in
                    <>
                      <Stack.Screen name="Login" component={LoginScreen} options={{ title: 'Oturum Açın' }} />                      
                    </>
                    ) : (
                    // User is signed in
                    <>
                    <Stack.Screen name="User" component={UserScreen} options={{
                        headerStyle: { backgroundColor: '#e8a200' },
                        headerTintColor: 'white',
                        headerTitleStyle: { color: '#fff' },
                        headerRight: () => (
                          <TouchableOpacity activeOpacity={0.4} underlayColor='transparent' onPress={() => logout() } style={{ marginRight: 12 }}>
                            <Icon
                              style={styles.icon}
                              fill='#FFFFFF'
                              name='power-outline'
                            />
                          </TouchableOpacity>
                        )
                      }} />

                      <Stack.Screen name="Lead" component={LeadScreen} options={{
                        title: 'Müşteri Adayları',
                        headerStyle: { backgroundColor: '#e8a200' },
                        headerTintColor: 'white',
                        headerTitleStyle: { fontWeight: 'bold', color: '#fff' },
                        headerRight: () => (
                          <TouchableOpacity activeOpacity={0.4} underlayColor='transparent' onPress={ () => console.log(navigation) } style={{ marginRight: 12 }}>
                            <Icon
                              style={styles.icon}
                              fill='#FFFFFF'
                              name='plus-outline'
                            />
                          </TouchableOpacity>
                      )}} />

                      <Stack.Screen name="AddLead" component={AddLeadScreen} options={{ title: 'Müşteri Adayı Ekle' }} />
                    </>
                  )}              
                </Stack.Navigator>
              </NavigationContainer>
            </AuthContext.Provider>
        </Layout>
      </ApplicationProvider>
    </>
  );
}

import*as React from'React'；
从“react native”导入{样式表、异步存储、警报、视图、图像、TouchableOpacity}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从“@ui kitten/components”导入{ApplicationProvider、布局、输入、按钮、文本、微调器、图标注册表、图标}；
从“@ui kitten/eva icons”导入{EvaIconsPack}”；
从“@eva design/eva”导入*作为eva；
从“./navigation/LinkingConfiguration”导入LinkingConfiguration；
从“axios”导入*作为axios；
从“./components/Base64”导入Base64；
从“./screens/LeadScreen”导入LeadScreen；
从“./screens/AddLeadScreen”导入AddLeadScreen；
从“./components/TabBarIcon”导入TabBarIcon；
从“./屏幕/主屏幕”导入主屏幕；
从“/screens/ActivityScreen”导入活动屏幕；
从“/screens/MenuScreen”导入菜单屏幕；
const Stack=createStackNavigator（）；
导出默认函数App（{navigation}）{
const logout=async（）=>{
等待AsyncStorage.removeItem（'token'）；
分派（{type:'SIGN_OUT'}）；
};
报税表（
{state.isLoading(
//我们还没有检查完代币
)：state.token==null(
//未找到令牌，用户未登录
) : (
//用户已登录
(
logout（）}style={{{marginRight:12}}>
)
}} />
(
console.log（导航）}style={{{marginRight:12}}>
)}} />
)}              
);
}

首先，我认为这里的

导航是不必要的，您可以删除它

export default function App({ navigation }) {  

在屏幕组件中，例如，
UserScreen
，您可以像这样使用导航

function UserScreen({navigation}) {
  // ...some codes
  navigation.navigate('WHERE_TO_GO');
  // ...some other codes
}

您还可以使用导航，而无需将其传递给道具

首先，您需要导入useNavigation

import { useNavigation } from '@'react-navigation/native'

然后，在您的组件中

function UserScreen() {
  const nav = useNavigation();
  // ...some codes
  nav.navigate('WHERE_TO_GO');
  // ...some other codes
}

你可以在这里得到更多的细节

对于
Lead
屏幕的onPress功能

<Stack.Screen name="Lead" component={LeadScreen} options={({ navigation }) => ({
  title: 'Müşteri Adayları',
  headerStyle: { backgroundColor: '#e8a200' },
  headerTintColor: 'white',
  headerTitleStyle: { fontWeight: 'bold', color: '#fff' },
  headerRight: () => (
    <TouchableOpacity activeOpacity={0.4} underlayColor='transparent' onPress={ () => navigation.navigate('WHERE_TO_GO') } style={{ marginRight: 12 }}>
      <Icon
        style={styles.icon}
        fill='#FFFFFF'
        name='plus-outline'
      />
    </TouchableOpacity>
)})} />

({
标题：“穆泰里·阿代拉尔”，
headerStyle:{背景颜色：'#e8a200'}，
头部颜色：“白色”，
headerTitleStyle:{fontWeight:'bold'，颜色：'#fff'}，
头灯：（）=>(
navigation.navigate（'WHERE_TO_GO'）}style={{{{marginRight:12}}>
)})} />
您应该使用
useLinkProps
来解决此问题：

import { useLinkProps } from '@react-navigation/stack';

这是一个关于如何编写使用它的代码的示例：

const LinkButton = ({ to, action, children, ...rest }) => {
  const { onPress, ...props } = useLinkProps({ to, action });

您可以将导航或路由道具传递到stack.screen中的选项中，如下所示

options={({navigation})=>({
    'Your code here'
})}

我已经用你的代码为你编辑了它

        <Stack.Screen name="Lead" component={LeadScreen}
         options={({ navigation }) => ({
             title: 'Müşteri Adayları',
             headerStyle: { backgroundColor: '#e8a200' },
             headerTintColor: 'white',
             headerTitleStyle: { fontWeight: 'bold', color: '#fff' },
             headerRight: () => (
                <TouchableOpacity activeOpacity={0.4} 
                   underlayColor='transparent' onPress={() => 
                   console.log(navigation)} style={{ marginRight: 12 }}>
                    <Icon
                       style={styles.icon}
                          fill='#FFFFFF'
                          name='plus-outline'
                      />
                  </TouchableOpacity>
                  )
         })} />

({
标题：“穆泰里·阿代拉尔”，
headerStyle:{背景颜色：'#e8a200'}，
头部颜色：“白色”，
headerTitleStyle:{fontWeight:'bold'，颜色：'#fff'}，
头灯：（）=>(
console.log（导航）}style={{{marginRight:12}}>
)
})} />
您能分享更多示例代码吗？当然，我添加了。但我必须在导出中使用它。这不是一个外部功能。请仔细查看代码。因为您似乎正在使用React Navigation 5，所以您仍然可以使用导航，而无需通过道具。让我编辑代码。谢谢，我正在等待。抱歉，您仍在通过n外部函数。我与UserScreen无关。我想在Ohh中导出默认值时在onPress上使用它。我只是使用UserScreen作为示例。对不起，让我把onPress的代码放进去。对不起，我的朋友，我想在onPress中使用导航变量。你能检查一下代码吗？请不要只发布代码作为答案，还要发布请解释你的代码是做什么的，以及它是如何解决问题的。带有解释的答案通常更有帮助，质量更好，并且更有可能吸引更多的投票。@MarkrotVeel感谢你的解释将明确记住这一点。为这些投票努力工作。哈哈。。。