无法在 react-navigation 5 上的屏幕之间导航

Posted 2023-03-15

【中文标题】无法在 react-navigation 5 上的屏幕之间导航

【英文标题】：Can't navigate between screen on react-navigation 5

【发布时间】：2020-03-08 19:49:44

【问题描述】：

我正在从不同的方式开发反应导航。 问题是我尝试过的最后一次。

我正在尝试使用自定义组件（某种按钮被驱逐）从 HomeScreen 导航到 DetailScreen。 问题是：“TypeError: Undefined is not an object (evalating 'this.prop.navigation.navigate')

有人可以帮助我理解这个问题吗？ （注意：我正在使用 react-navigation 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>
  )

文件主屏幕

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;

按钮

//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;

详细画面

//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;

【参考方案1】：

Button类中没有导航属性，可以这样传递：

<ButtonNav
  navigation=this.props.navigation />

或者你可以通过 props 传递事件onPress：

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

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

【讨论】：

如果可以，请帮我解决这个问题？谢谢***.com/questions/61606346/…

【参考方案2】：

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

在你的类中包含这段代码。

constructor(props)
super(props);

【讨论】：

如果你只传递道具你不需要构造函数