React native Can'；t在react navigation 5上的屏幕之间导航

我正在从不同的角度开发反应导航。 麻烦是我最后一次尝试

我试图用一个自定义组件（按钮类型）从主屏幕导航到详细屏幕。 问题是：“TypeError:Undefined不是对象（计算'this.prop.navigation.navigate'）

有人能帮我理解这个问题吗？ （注：我正在使用react导航5）

我给你不同的文件：

//fichier app.js

import 'react-native-gesture-handler'
import React from 'react';

import HomeScreen from './src/screens/HomeScreen'
import DetailScreen from './src/detailscreen'

import {NavigationContainer} from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

//fichier app.js
导入“反应本机手势处理程序”
从“React”导入React；
从“./src/screens/HomeScreen”导入主屏幕
从“./src/DetailScreen”导入DetailScreen
从'@react navigation/native'导入{NavigationContainer}
从'@react navigation/stack'导入{createStackNavigator}；
const Stack=createStackNavigator（）；
导出默认函数App（）{
返回(
)
}

文件主屏幕

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


class HomeScreen extends React.Component  {
  render() {
    console.log('Home' + this.props)
    return (
      <View 
        style={{ alignItems: 'center', justifyContent: 'center'}}>

        <View 
          style={{height: 120, alignItems: 'center', justifyContent: 'center'}}>
          <Text>Zone 1</Text>
        </View>

        <ButtonNav/>

      </View>
    )
  }
}


export default HomeScreen;

从“React”导入React；
从“react native”导入{视图、文本、按钮}；
从“./按钮”导入按钮nAV；
类主屏幕扩展了React.Component{
render（）{
console.log（'Home'+this.props）
返回(
1区
)
}
}
导出默认主屏幕；

钮扣

//Button

import React from 'react';
import { View, Text, Button } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

class ButtonNav extends React.Component {

    render() {
      console.log(this.props.navigation)
      return (
        <View 
          style={{height: 120, alignItems: 'center', justifyContent: 'center' }}>
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Detail')}>
            <Text>Button</Text>
          </TouchableOpacity>
        </View>
      );
    }
  }

  export default ButtonNav;

//按钮
从“React”导入React；
从“react native”导入{视图、文本、按钮}；
从“反应本机手势处理程序”导入{TouchableOpacity}；
类ButtonNav扩展了React.Component{
render（）{
console.log（this.props.navigation）
返回(
this.props.navigation.navigate（'Detail'）}>
按钮
);
}
}
导出默认按钮nNAV；

详细信息屏幕

//detail

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

class Detail extends React.Component {

  render() {
    console.log(this.props)
    return (
      <View 
      style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    )
  }
}

export default Detail;

//详细信息
从“React”导入React；
从“react native”导入{View，Text}；
类详细信息扩展了React.Component{
render（）{
console.log（this.props）
返回(
详细信息屏幕
)
}
}
导出默认细节；

所以在ButtonNav类中，这个类没有道具

将这段代码包含在您的类中

---

所以在ButtonNav类中，这个类没有道具

将这段代码包含在您的类中

---

Button类中没有navigation属性，您可以通过以下方式传递它：

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

---

Button类中没有navigation属性，您可以通过以下方式传递它：

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

---

如果可以，请帮助我解决这个问题？如果可以，请帮助我解决这个问题？如果你只传递道具，请感谢你不需要构造函数如果你只传递道具，则不需要构造函数

<ButtonNav
  onPress={() => this.props.navigation.navigate('Detail')} />

<TouchableOpacity
  onPress={this.props.onPress}>
  <Text>Button</Text>
</TouchableOpacity>