Question

其他路线正在运作，但这个路线正在给我'undefined is not an object ('evaluating 'navigation.navigate)。我使用过this.props.navigation.navigate('review')但同样的问题。

第一个文件：想要导航到审核屏幕。

import React, { Component } from 'react';
import { TouchableWithoutFeedback, View } from 'react-native';
import { List, ListItem, Button } from 'react-native-elements';

class Items extends Component {

    onRowPress = ({ navigation }) => {

        navigation.navigate('review');
    }


    render() {
        const { name } = this.props.employee;
        return (
            <View>
            <TouchableWithoutFeedback onPress={this.onRowPress}>
                <List>
                    <ListItem
                        roundAvatar
                        title={name}
                        chevronColor='purple'
                    />
                </List>
            </TouchableWithoutFeedback>
            </View>
        );
    }
}


export default Items;

第二个文件：此处导入项目。

import React, { Component } from 'react';
import { View, Text, ActivityIndicator, ListView } from 'react-native';
import { Button, Icon } from 'react-native-elements';
import { connect } from 'react-redux';
import Items from '../components/ListItem';



import { employeesFetch } from '../actions';

class MapScreen extends Component {
    static navigationOptions = {
        title: 'Map',
        tabBarIcon: ({ tintColor }) => {
            return <Icon name='my-location' size={30} color={tintColor} />;
        }

    }

    state = {
        dataLoaded: false
    }

    componentWillMount() {
        this.props.employeesFetch();

        this.createDataSource(this.props);
    }
    componentWillReceiveProps(nextProps) {
        this.createDataSource(nextProps);
    }
    createDataSource({ employees }) {
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });
        this.dataSource = ds.cloneWithRows(employees);
    }
    renderRow(employee) {
        return <Items employee={employee} />;
    }

    componentDidMount() {
        this.setState({ dataLoaded: true })
    }

    render () {
        if (!this.state.dataLoaded) {
            return (
                <View style={{ flex: 1, justifyContent: 'center' }}>
                    <ActivityIndicator size='large' />
                </View>
            );
        }
        return (
            <ListView
                enableEmptySections
                dataSource={this.dataSource}
                renderRow={this.renderRow} 
            />
        );
    }
}

有解决方法吗？我一直在调试这个。

Answer 1

假设您的 MapScreen 已在'nowait中注册，

您需要将navigator传递给项目组件

navigation prop

并在 Items.js

中

renderRow = (employee) =>  { // For binding with this
        return <Items employee={employee} navigation={this.props.navigation} />;
    }

Answer 2

这个问题实际上已经有很多相似的重复，但是回答比挖出一个完全相同的错误更快。

假设您正确设置了根导航器并将其用作屏幕，则您的MapScreen组件可能会访问navigation道具。但是，您的Items组件无权访问navigation道具，因为它未作为HOC或道具传递给它。这是onRowPress无效的原因之一。
- 要解决此问题，请：
  1. 将navigation（或navigate）作为道具向下传递，以便Items可以访问它。然后使用this.props.navigation中的onRowPress或
  2. 冒泡onRowPress，使其成为传递给Items的道具。这样，您可以在MapScreen中定义它，而不是您可以访问navigation道具的位置。
您的onRowPress也需要修复。你试图凭空摧毁navigation。你需要传递一些东西进行解构，或者在函数中对道具进行解构。

此外，ListView已被弃用，因此除非您使用的是旧版本的React Native，否则您不应该使用它。请根据您的需要使用FlatList或SectionList。

遇到错误：undefined不是对象（评估＆＃39; navigation.navigate＆＃39;）

2 个答案: