Javascript React Native props.navigation.navigate不是对象

我正在我的

React Native

应用程序中进行组件间的导航，到目前为止，一切都相对正常，直到我遇到这个错误为止

这是我想导航的最后一个组件，但我不知道为什么我不能导航，每隔一个组件，我都遵循相同的结构，它们工作，但这是唯一一个不工作的组件

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

import Icon from 'react-native-vector-icons/MaterialIcons';

const Icono = (props) => {
    return(
    <TouchableHighlight
      underlayColor={'transparent'}
      style={styles.icono}
      onPress={() => props.navigation.navigate('Login')}>
      <View>
        <Icon name="video-call" color="#7796ff" size={35} />
      </View>
    </TouchableHighlight>
        );
}

const styles = StyleSheet.create({
    icono: {
        paddingRight: 10,
        paddingLeft: 10,
        paddingTop: 17,
        textAlign: 'center',
      },
});

export default Icono;

从“React”导入React；
进口{
样式表，
看法
触控高光，
按钮
}从“反应本机”；
从“反应本机矢量图标/唯物主义者”导入图标；
常量Icono=（道具）=>{
返回(
props.navigation.navigate（'Login'）}>
);
}
const styles=StyleSheet.create({
icono：{
paddingRight:10，
paddingLeft:10，
paddingTop:17，
textAlign:'中心'，
},
});
导出默认ICNO；

这是我用来实现导航的代码

import React, {useState} from 'react';
import {View, StyleSheet} from 'react-native';
import {Text} from 'react-native-paper';
import {TextInput} from 'react-native-paper';
import AsyncStorage from '@react-native-community/async-storage';
import {Button} from 'react-native-paper';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

const LoginScreen = (props) => {
  const [userId, setUserId] = useState('');
  const [loading, setLoading] = useState(false);

  const onLogin = async () => {
    setLoading(true);
    try {
      await AsyncStorage.setItem('userId', userId);
      setLoading(false);
      props.navigation.navigate('Call');
    } catch (err) {
      console.log('Error', err);
      setLoading(false);
    }
  };

  return (
    <View style={styles.root}>
      <View style={styles.content}>
        <Text style={styles.heading}>Ingresa tu ID</Text>
        <TextInput
          label="id"
          onChangeText={text => setUserId(text)}
          mode="outlined"
          style={styles.input}
        />
        <Button
          mode="contained"
          onPress={onLogin()}
          loading={loading}
          style={styles.btn}
          contentStyle={styles.btnContent}
          disabled={userId.length === 0}>
          Conectar al servicio de video
        </Button>
        <Button
          mode="contained"
          onPress={props.navigation.navigate('Contacto')}
          loading={loading}
          style={styles.btn}
          contentStyle={styles.btnContent}
          disabled={userId.length === 0}>
          Salir
        </Button>
      </View>
    </View>
  );
}


const styles = StyleSheet.create({
  root: {
    backgroundColor: '#fff',
    flex: 1,
    justifyContent: 'center',
  },
  content: {
    paddingHorizontal: 20,
    justifyContent: 'center',
  },
  heading: {
    fontSize: 18,
    marginBottom: 10,
    fontWeight: '600',
  },
  input: {
    height: 60,
    marginBottom: 10,
  },
  btn: {
    height: 60,
    alignItems: 'stretch',
    justifyContent: 'center',
    fontSize: 18,
  },
  btnContent: {
    alignItems: 'center',
    justifyContent: 'center',
    height: 60,
  },
});

export default LoginScreen;

import React，{useState}来自“React”；
从“react native”导入{View，StyleSheet}；
从“react native paper”导入{Text}；
从“react native paper”导入{TextInput}；
从“@react native community/async storage”导入异步存储；
从“react native paper”导入{Button}；
从'@react navigation/stack'导入{createStackNavigator}；
const Stack=createStackNavigator（）；
常量登录屏幕=（道具）=>{
const[userId，setUserId]=useState（“”）；
const[loading，setLoading]=useState（false）；
const onLogin=async（）=>{
设置加载（真）；
试一试{
等待AsyncStorage.setItem（'userId'，userId）；
设置加载（假）；
props.navigation.navigate（'Call'）；
}捕捉（错误）{
console.log（'Error'，err）；
设置加载（假）；
}
};
返回(
安格拉图ID
setUserId（文本）}
mode=“概述”
style={style.input}
/>
视频服务公司
萨利尔
);
}
const styles=StyleSheet.create({
根目录：{
背景颜色：“#fff”，
弹性：1，
为内容辩护：“中心”，
},
内容：{
水平方向：20，
为内容辩护：“中心”，
},
标题：{
尺码：18，
marginBottom:10，
重量：'600'，
},
输入：{
身高：60，
marginBottom:10，
},
btn:{
身高：60，
对齐项目：“拉伸”，
为内容辩护：“中心”，
尺码：18，
},
BTN内容：{
对齐项目：“居中”，
为内容辩护：“中心”，
身高：60，
},
});
导出默认登录屏幕；

---

这是我想要导航到的代码。值得一提的是，我使用的是

react导航

，我的所有组件都包装在

组件中，但我不明白为什么导航的所有其他组件都工作，而这个组件不允许我这样做。

从您的代码中可以看出，它是一个独立的组件，不属于导航堆栈的一部分

你可以用两种方法来解决这个问题

将导航作为道具从作为堆栈一部分的父级传递

<Icono navigation={this.props.navigation} />

使用icono内部的钩子并从那里调用它

---

你在哪里使用Icono？@GuruparanGiritharan我在另一个文件中使用Icono，我这样称呼它检查我的答案，希望它能帮助：）这对我澄清了一切，非常感谢。我还有一个问题。在我的

onPress上{}

是否可以放置```（）=>navigation.navigate（'Login'）``？