Невозможно использовать навигацию по компоненту внутри функции стрелки.Undefined не является объектом (оценка 'n.props.navigation')

Question

Невозможно перейти к другому экрану

Я пробовал импортировать с помощью Navigation, но все еще не может работать, показывалось

Uncaught Error: Undefined не является объектом (оценка 'n.props.navigation ')

Article.js

import ArticleItem from 'ArticleItem'
.....
        <FlatList
          style={styles.containerFlatList}
          data={this.state.dataSource}
          renderItem={({item}) =>
            <ArticleItem
              navigation={this.props.navigation}
              title={item.title}
              image={item.article_path}
              id={item.id}
              date={moment(item.created_at).locale('id').format("ll")}/>
          }
          keyExtractor={({title},index) => title}

        />
      }

ArticleItem.js

import {withNavigation} from 'react-navigation';
import DetailArticle from '../screens/DetailArticle';

import Router from '../Router';

export default ArticleItem = (data) => (
<View style={styles.containerArticle}>
 <TouchableOpacity onPress={() => 
  {this.props.navigation.navigate('DetailArticle')}}>
  <Image style={styles.imageArticle} source= 
   {{uri:'http://localhost/img/'+data.image}}/>
  <View style={{padding: 10}}>
   <Text style={{marginBottom: 8, fontSize: 18}}>{data.title}</Text>
   <Text style={{fontSize: 12, color:'grey'}}>{data.date}</Text>
  </View>
 </TouchableOpacity>
</View>
);

Я что-то пропустил?

Answer 1

Из кода похоже, что ArticleItem является функциональным компонентом, поэтому вы не можете получить доступ к реквизиту из ключевого слова this.

Для вашего примера вы отправляете реквизиты как data

Получите доступ к навигации как data.navigation.navigate('some-route')

Для такого компонента, как этот.

<ComponentA a='1' b='2'/>

Если это такой функциональный компонент, как здесь

const ComponentA=props=>{
 //access here as props.a or props.b
 return someJSX
}