无法在反应导航中读取未定义的属性“导航" [英] Cannot read property 'navigate' of undefined in react-navigation

问题描述

我在 Router.js 中使用了 import { StackNavigator } from 'react-navigation';

I have used import { StackNavigator } from 'react-navigation'; in my Router.js

import { StackNavigator } from 'react-navigation';
import LoginForm from './components/LoginForm';
import EmployeeList from './components/EmployeeList';
import EmployeeCreate from './components/EmployeeCreate';

const RouterComponent = StackNavigator(
{
  LoginForm: {
    screen: LoginForm,
    navigationOptions: {
      title: 'Please Login'
    }
  },
  EmployeeList: {
    screen: EmployeeList,
  },
  EmployeeCreate: {
    screen: EmployeeCreate,
    navigationOptions: {
      title: 'Create Employee'
    }
  }
},
{
  initialRouteName: 'LoginForm',
}
);

export default RouterComponent;

当然我在我的 App.js 中使用它

Of course i use it in my App.js

import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import Router from './src/Router';

export default class App extends React.Component {
  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

我可以在我的 LoginForm.js 中使用 this.props.navigation 像这个函数:

And i can use this.props.navigation in my LoginForm.js like this function:

  onButtonPress() {
    const { email, password, navigation } = this.props;

    this.props.loginUser({ email, password, navigation });
  }

我将导航传递给我的操作文件，我可以用它来导航另一个屏幕，如下所示:

I pass navigation to my Action file , i can use it to navigate another screen , like this:

const loginUserSuccess = (dispatch, user, navigation) => {
  dispatch({
    type: LOGIN_USER_SUCCESS,
    payload: user
  });
  //navigation is from LoginForm.js , navigate to EmployeeList is working
  navigation.navigate('EmployeeList');
};

现在我尝试在 ListItem.js 中使用 this.props.navigation.navigate

Now i try to use this.props.navigation.navigate in my ListItem.js

我的 ListItem 在 EmployeeList.js

这是我的 EmployeeList.js

import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, Text, Button, FlatList } from 'react-native';
import { employeesFetch } from '../actions';
import ListItem from './ListItem';

class EmployeeList extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: 'EmployeeList',
    headerLeft: null,
    headerRight: <Button title="Add" onPress={() => navigation.navigate('EmployeeCreate')} />,
  });

  componentWillMount() {
    this.props.employeesFetch(); 
  }
  // Using ListItem over here
  renderRow(employee) {
    return <ListItem employee={employee} />;
  }

  render() {
    console.log(this.props);
    return (
      <FlatList
        data={this.props.employees}
        renderItem={this.renderRow}
        keyExtractor={employee => employee.uid}
      />
    );
  }
}

const mapStateToProps = state => {
  const employees = _.map(state.employees, (val, uid) => {
    return { ...val, uid };
  });

  return { employees };
};

export default connect(mapStateToProps, { employeesFetch })(EmployeeList);

这是我在 ListItem.js 中使用 this.props.navigation.navigate 的问题

Here is my problem use this.props.navigation.navigate in ListItem.js

import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback } from 'react-native';
import { CardSection } from './common';

class ListItem extends Component {

  onRowPress() {
    this.props.navigation.navigate('EmployeeCreate');
  }

  render() {
    const { item } = this.props.employee;
    return (
      <TouchableWithoutFeedback onPress={this.onRowPress.bind(this)}>
        <View>
          <CardSection>
            <Text style={styles.titleSytle}>
              {item.name}
            </Text>
          </CardSection>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = {
  titleSytle: {
    fontSize: 18,
    paddingLeft: 15
  }
};

export default ListItem;

我可以在我的 LoginForm.js 中使用 this.props.navigation ，我不明白为什么我在 ListItem.js 中使用它导航未定义?

I can use this.props.navigation in my LoginForm.js , i can't figure it out why i use it in ListItem.js navigate is undefined ?

任何帮助将不胜感激.提前致谢.

Any help would be appreciated. Thanks in advance.

推荐答案

在文件 EmployeeList.js 中将导航作为道具传递给 ListItem.

in file EmployeeList.js pass navigation as prop to ListItem.

renderRow(employee) {
  return <ListItem employee={employee} navigation={this.props.navigation} />;
}

现在您应该可以使用 ListItem.js 中的 this.props.navigation 访问导航.

Now you should be able to access navigation using this.props.navigation inside ListItem.js.

只是一个观察，永远不要将方法绑定到渲染中的上下文函数被重复调用并创建一个新实例每一次.如下更改您的 ListItem.js.

Just an observation, never bind methods to context inside the render function as it is called repeatedly and a new instance will be created each time. Change your ListItem.js as below.

class ListItem extends Component {

  constructor(props) {
    super(props);
    this.onRowPress = this.onRowPress.bind(this);  // here we bind it
  }

  onRowPress() {
    this.props.navigation && this.props.navigation.navigate('EmployeeCreate');
  }

  render() {
    const { item } = this.props.employee;
    return (
      <TouchableWithoutFeedback onPress={this.onRowPress}>
        <View>
          <CardSection>
            <Text style={styles.titleSytle}>
              {item.name}
            </Text>
          </CardSection>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

这篇关于无法在反应导航中读取未定义的属性“导航"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！