Я получил данные из API и заполнил их в списке, отрисовав элемент списка в другом классе, но я не могу добавить навигацию по нажатию кнопки в классе dataitem, был бы благодарен за некоторую помощь Класс меню, в котором я получаю данные, и у меня есть свой список
import React, {Component} from 'react';
import {
Container,
FlatList,
ScrollView,
Header,
View,
Alert,
Content,
List,
ListItem,
Thumbnail,
Text,
Left,
Body,
Right,
Button,
Image,
Form,
} from 'native-base';
import {getrecipe} from './service';
import DataItem from './dataitems';
import '../global.js';
import {ActivityIndicator} from 'react-native-paper';
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
data: null,
};
}
componentDidMount() {
getrecipe().then(
data => {
var hits = data.hits;
this.setState({
isLoading: false,
data: hits,
});
},
error => {
alert.alert('error', 'went wrong');
},
);
}
render() {
return (
<Container>
<Content>
<List
keyExtractor={(item, index) => index.toString()}
dataArray={this.state.data}
renderRow={item => {
return <DataItem data={item} />;
}}
/>
</Content>
</Container>
);
}
}
, и это мой класс элементов данных, в котором я визуализирую строки, в которых мне нужно добавить навигацию при нажатии кнопки
import React, {Component} from 'react';
import {
Container,
Header,
Alert,
Content,
List,
ListItem,
Thumbnail,
Left,
Body,
Right,
Button,
Form,
} from 'native-base';
import {
StyleSheet,
ScrollView,
TouchableOpacity,
Image,
View,
Text,
} from 'react-native';
import {color} from 'react-native-reanimated';
import {StackNavigator} from 'react-navigation';
import {useNavigation} from '@react-navigation/native';
class DataItem extends Component {
constructor(props) {
super(props);
this.data = props.data;
}
CallIngredient = () => {
this.props.navigation.navigate('Ingredient');
};
render() {
const recipe = this.props.data.recipe;
return (
<ScrollView style={{flex: 0}}>
<ListItem
thumbnail
onPress={() => {
navigation.navigate('Ingredient');
}}>
<Left>
<Thumbnail circular source={{uri: recipe.image}} />
</Left>
<Body>
<Text>{recipe.label}</Text>
</Body>
<Right />
</ListItem>
</ScrollView>
);
}
}
, но этот navigation.navigate не работает и выдает ошибку. Может кто-нибудь, пожалуйста, помогите