Не работает навигация в React Native. Я хочу что бы переход был с Categories на страницу Subcategories
'Это главный файл использую Navigate v5 / This is the main file using Navigate v5'
App.js
import React from 'react';
import store from "./redux/redux-store"
import reducers from './redux/categories-reducer';
import { StyleSheet, Text, View } from 'react-native';
import Categories from "./components/categories/Categories";
import Subcategory from './components/categories/Subcategory/Subcategory'
import {Provider} from "react-redux";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import CategoriesContainer from "./components/categories/CategoriesContainer";
const App = () => {
const CategoriesStack = createStackNavigator();
const CategoriesStackScreen = () => (
<CategoriesStack.Navigator>
<CategoriesStack.Screen name="Категория предприятий" component={Categories} />
<CategoriesStack.Screen name="Подкатегория" component={Subcategory} options={({ route }) => ({ title: route.params.count })} />
</CategoriesStack.Navigator>
);
return (
<Provider store={store}>
<NavigationContainer>
<View style={styles.container}>
<CategoriesContainer/>
<Categories/>
</View>
<CategoriesStackScreen/>
</NavigationContainer>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
'CategoriesContainer.js контейнерная компонента. В это место приходит в информация из сервака.
CategoriesContainer.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Categories from "./Categories";
import {connect} from "react-redux"
import {setCategories} from "../../redux/categories-reducer";
import * as axios from "axios";
class CategoriesContainer extends React.Component {
componentDidMount() {
axios.get("http://109.73.14.239/hotels/api/categories").then(response => {
this.props.setCategories(response.data.categories)
});
}
debugger;
render() {
return <Categories categories = {this.props.categories} nav = {'1'} />
}
}
let mapStateToProps = (state) => {
debugger
return {
categories: state.categoriesPage.categories,
//CategoriesStackScreen: CategoriesStackScreen
}
}
export default connect(mapStateToProps, {
setCategories
})(CategoriesContainer);
Эта страница где отображаются категории. Презентационная компонента. Через debugger выяснил вначале почему то приходит props в Categories.js, а потом становится undefined
Categories.js
import React from 'react';
import { StyleSheet, Text, View, SectionList, SafeAreaView, FlatList } from 'react-native';
import Constants from "expo-constants";
debugger;
const Item = ({ title }, { route }) => (
<View style={styles.item}>
<Text style={styles.title} onPress={ () => props.navigation.navigate("Subcategory") }>{title}</Text>
</View>
);
let Categories = (props) => {
debugger;
return (
<SafeAreaView style={styles.container}>
<FlatList
data={props.categories}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
Subcategory.js
import React from 'react'
import { View, Text, StyleSheet } from "react-native";
const Subcategory = () => (
<View>
<Text>Предприятия</Text>
</View>
)
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
})
export default Subcategory;