反应原生 props.navigation.navigate 未定义

Question

我真的无法让我的导航工作。我的导航在 DrawerNavigator 菜单中有效，但在组件中无效。我什么都试过了，但肯定有什么我还是不明白。

我总是得到一个错误：“TypeError: undefined is not an object (evaluation'_this.props.navigation')”

这是我的观点：

import React from 'react';
import { Provider } from 'react-redux';
import configureStore from '../../store/configure-store';
import StoresListContainer from '../../packages/stores/containers/list-container';

const store = configureStore({});

const Stores = () => {
  return (
    <Provider store={store}>
      <StoresListContainer navigation={this.props.navigation} />
    </Provider>
  );
};

export default Stores;

这是我的组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  View,
  Text,
  ActivityIndicator,
  FlatList,
  Image,
  TouchableNativeFeedback,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Styles from './styles';
import Theme from '../../../config/theme';

type Props = {
  error: boolean,
  loading: boolean,
  data: Object,
  fetchData: Function,
};

class ListComponent extends Component<Props> {

  constructor(props) {
    super(props);
    this.goToPage = this.goToPage.bind(this);
  }

  componentDidMount() {
    this.props.fetchData();
  }

  goToPage(param) {
    this.props.navigation.navigate(param);
  }

  render() {
    const hasData = Object.keys(this.props.data).length;
    const errorMessage = () => {
      return (
        <Text>Ops! Ocorreu um erro ao carregar os dados.</Text>
      );
    };

    const renderData = (item) => {
      return (
        <TouchableNativeFeedback contact={item} onPress={() => this.goToPage('Store')}>
          <View style={Styles.renderData}>
            <View style={{ flex: 0 }}>
              <Image style={Styles.renderDataPicture} source={{ uri: item.item.image }} />
            </View>
            <View style={{ flex: 2 }}>
              <Text style={Styles.renderDataTitle}>{ item.item.fantasy_name }</Text>
              <Text style={Styles.renderDataSubtitle}>{ item.item.location }</Text>
            </View>
            <View style={Styles.renderDataItemIconContainer}>
              <Icon name="chevron-right" style={Styles.renderDataItemIcon} />
            </View>
          </View>
        </TouchableNativeFeedback>
      );
    };

    const renderLoading = () => {
      return (
        <View style={Styles.renderLoading}>
          <ActivityIndicator color={Theme.color.secondary} size="large" />
          <Text style={Theme.text}>Aguarde</Text>
        </View>
      );
    };

    const getData = (data) => {
      return (
        <FlatList data={data} renderItem={renderData} keyExtractor={(item, index) => index} />
      );
    };

    return (
      <View style={Styles.container}>
        { this.props.loading ? renderLoading() : null }
        { this.props.error ? errorMessage() : null }
        { hasData ? getData(this.props.data) : null }
      </View>
    );
  }
}

export default ListComponent;

Answer 1

您使用的是功能性无状态组件而不是类，因此您需要删除this。

const Stores = (props) => {
  return (
    <Provider store={store}>
      <StoresListContainer navigation={props.navigation} />
    </Provider>
  );
};

// ES6 Class
class Stores extends Component {
  render(){
    return (
      <Provider store={store}>
        <StoresListContainer navigation={this.props.navigation} />
      </Provider>
    );
  }
}