Question

美好的一天。

我尝试使用反应式导航导航到另一个页面，但显示“反应式中未定义不是对象（评估this.props.navigation.navigate）”

这是我的代码

import React, { Component } from 'react';
import {Text, View, Image, Alert} from 'react-native';
import { Icon, Button, List, ListItem, Left, Thumbnail, Body, Right } from 'native-base'; 
import {styles} from '../../../css/Designs';
import OptionsMenu from "react-native-options-menu";
const myIcon = (<Icon name='more' style={{fontSize:30,color:'#000'}}/>);

export class TheStudent extends Component {

    constructor(props) {
    super(props);
};

editItem = (student) => {
    this.props.navigation.navigate('AllStudents');
}

deleteItem = (student) => {
    Alert.alert(
        '',
        'Delete student?',
        [
            {
                text: 'No',
                onPress: () => console.log('Cancel Pressed'),
                style: 'cancel',
            },

            { 
                text: 'Yes', 
                onPress: () => this.deleteTheItem(student)
            },
        ],
        {cancelable: false},
      );
}

deleteTheItem = (student) => {
    alert(student);
}

render() {

    return(

        <List>
            <ListItem avatar>
                <Left>
                    <Thumbnail source={require('../../../img/male_avatar.png')} />
                </Left>
                <Body>
                    <Text style={styles.userName}>{this.props.surname} {this.props.firstname} {this.props.middlename} </Text>
                    <Text>{this.props.matric}    {this.props.level}L   {this.props.phone}</Text>
                </Body>
                <Right>
                    <OptionsMenu
                        customButton={myIcon}
                        options={["Edit", "Delete"]}
                        actions={[this.editItem.bind(this,this.props.id), this.deleteItem.bind(this,this.props.id)]}/>
                </Right>
            </ListItem> 
        </List>
    );
}
}

我已经在这个问题上停留了几个小时，并且尝试了在此问题上看到的所有其他链接，但都无济于事。如果您能提供帮助，我会很高兴。谢谢。

Answer 1

您应该使用HOC withNavigation包装您的组件，然后该道具将在组件中可用，尝试执行以下操作：

import { withNavigation } from 'react-navigation';

class TheStudent extends Component {
   ....
}
export withNavigation(TheStudent)

Answer 2

这是@Rachid Rhafour在回答中提到的一种解决方案。

您可以使用Navigation导出组件，该组件可以从react-navigation导入。

import { withNavigation } from 'react-navigation';

class YourClassName extends Component {

}
export withNavigation(YourClassName)

另一种方法是您可以制作路由文件，通过该文件可以导航到任何组件文件而没有任何麻烦。

示例：如果要导航的组件有两个或三个，则应按路线文件维护该路线。

import React from "react";
import { createStackNavigator, createAppContainer } from "react-navigation";
import ScreenOne from "./ScreenOne";
import ScreenTwo from "./ScreenTwo";
const AppNavigator = createStackNavigator({
  Home: {
    screen: ScreenOne
  },
  Profile: {
    screen: ScreenTwo
  }
});

export default createAppContainer(AppNavigator);

未定义不是反应式中的对象（评估this.props.navigation.navigate）

2 个答案: