Не работает навигация в 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;


Ответы (0 шт):