React-native props.navigation.navigate undefined

Question

私は実際にナビゲーションを動作させることができません。ナビゲーションはDrawerNavigatorメニューで動作しますが、コンポーネントでは機能しません。私はすべてを試しましたが、まだ理解していないものがなければなりません。

私は常にエラーを取得： "例外TypeError：未定義のオブジェクト（evaluating'_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> 
    ); 
    } 
}