import React, {useEffect} from 'react';
import { FlatList, Text, View } from 'react-native';
import { StoresFeed } from '../../handlers/stores/homepage/Feed';
import { CategoryPage } from '../../handlers/stores/pages/Category';
import { StoreListService } from '../../services/stores/homepage/List';
export function CCScreen({ route, navigation }: { route: any, navigation:any }){
useEffect(() => {
if (route.params?.cat && route.params?.catName) {}
}, [route.params?.cat, route.params?.catName]);
let curQuery = {
categoryId : route.params?.cat
}
const productsList = new StoreListService('currentCategory',curQuery).eventStart();
return (
<React.Fragment>
<View style={screenStyle.list}>
<Text style={pageStyle.listTitle}>{route.params?.catName}</Text>
<FlatList data={productsList} renderItem={({item}: {item: any}) => {
return <Text style={pageStyle.LCList} onClick={() => navigation.navigate('CurrentProduct', {product: item.ID})}>{item.Product}</Text>
}} keyExtractor={(item, index) => index.toString()} />
</View>
</React.Fragment>
);
}
const pageStyle = new CategoryPage('ui-change',0).eventStart(),
screenStyle = new CategoryPage('ui-change',1).eventStart();
×
TypeError: Cannot read properties of undefined (reading 'params')
CCScreen
/home/head/Desktop/Серега Младший/ITProjects/wccnavigator/pages/stores/catView.tsx:10
7 | export function CCScreen({ route, navigation }: { route: any, navigation:any }){
8 | useEffect(() => {
9 | if (route.params?.cat && route.params?.catName) {}
> 10 | }, [route.params?.cat, route.params?.catName]);
11 | let curQuery = {
12 | categoryId : route.params?.cat
13 | }
import * as React from 'react';
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { FontAwesome, FontAwesome5 } from '@expo/vector-icons';
import { Stores } from './pages/stores';
import { CCScreen } from './pages/stores/catView';
import { CPScreen } from './pages/stores/productView';
function StoresScreen({navigation}: {navigation: any}) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff'}}>
<Stores navigation={navigation}/>
</View>
);
}
function CC({navigation, cat, catName}: {navigation: any, cat: any, catName: any}) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<CCScreen navigation={navigation} cat={cat} catName={catName}/>
</View>
);
}
function CP({navigation, product}: {navigation: any, product: any}) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<CPScreen product={product}/>import { Navigator } from './pages/navigator';
import { Buys } from './pages/buys';
</View>
);
}
let icons = {
"stores": ({ focused, size }: { focused: boolean, size: number }) => (
<FontAwesome5 name="store" size={size} color={focused ? '#ff0033' : '#8a8886'} />
)
};
let headerSheet = {
"ui":{
"stores":{
backgroundColor: '#ffffff'
},
"category": {
backgroundColor: 'orange'
},
"product": {
backgroundColor: '#c19c00'
}
},
"text":{
"stores":'#ff0033',
"category": "#ffffff"
}
};
let headerButtons = {
"stores":() => (
<FontAwesome5
name="search"
onPress={() => alert('Кнопка поиска')}
style={{
fontSize: '160%',
width: '40%'
}}
color="#ff0033"
/>
),
"product":() => (
<FontAwesome5
name="cart-plus"
onPress={() => alert('Управление покупками')}
style={{
fontSize: '130%',
width: '45%'
}}
color="#ffffff"
/>
)
};
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="Home">
<Tab.Screen name="Stores" component={StoresScreen} options={{ title: 'Подготовка к покупкам', tabBarLabel: 'Подготовка', tabBarIcon: icons['stores'], headerTintColor: headerSheet['text']['stores'], headerStyle: headerSheet['ui']['stores'], headerTitleStyle: {fontWeight: 'bold',fontSize: '160%'}, headerRight: headerButtons['stores']}}/>
<Tab.Screen name="CurrentCategory" component={CC} options={{ tabBarVisible: false, headerTintColor: headerSheet['text']['category'], headerStyle: headerSheet['ui']['category'], headerTitleStyle: {fontWeight: 'normal',fontSize: '130%'}, title: "Страинца категории"}} />
<Tab.Screen name="CurrentProduct" component={CP} options={{ tabBarVisible: false, headerTintColor: headerSheet['text']['category'], headerStyle: headerSheet['ui']['product'], headerTitleStyle: {fontWeight: 'normal',fontSize: '130%'}, headerRight: headerButtons['product'], title: "Страница продукта" }} />
</Tab.Navigator>
</NavigationContainer>
);
}import React, {Component} from 'react';
import { FlatList, Text, View } from 'react-native';
import { BottomTabNavigator, NavigationScreenProp } from 'react-navigation';
import { StoreListService } from '../services/stores/homepage/List';
interface StoresProps {
navigation: NavigationScreenProp<any,any>
}
export class Stores extends Component<StoresProps, object>{
render(){
return (
<React.Fragment>
<View>
<Text>Категории</Text>
<FlatList data={catList} renderItem={({item} : {item: any}) => {
return <Text onPress={() => this.props.navigation.navigate('CurrentCategory',{cat: item.ID, catName: item.Category})}>{item.Category}</Text>
}} keyExtractor={(item, index) => index.toString()}/>
</View>
</React.Fragment>
);
}
}
const catList = new StoreListService('categories', null).eventStart();import React, {Component} from 'react';
import { Image, Text, View } from 'react-native';
import { StoreFeedService } from '../../services/stores/homepage/Feed';
interface CPScreenProps {
navigation: NavigationScreenProp<any,any>,
product: any
}
export class CPScreen extends Component<CPScreenProps, object>{
render(){
let curQuery = {
productId : this.props.product
}
const productInfo = new StoreFeedService('currentProduct',curQuery).eventStart();
return (
<React.Fragment>
<View>
<Image source={{uri: productInfo.Image}}/>
<Text>{productInfo.Name}</Text>
<Text>{productInfo.Description}</Text>
</View>
</React.Fragment>
);
}
}import * as React from 'react';
import { IServiceControl } from "../../handlers/ControlInterface";
export class StoreFeedService{
feedStoresCurrent: { svc: any; query: any; };
constructor(event: any,type: any){
this.feedStoresCurrent = {
svc: event,
query: type
}
}
svc: string | undefined;
query: string | undefined;
protected serviceFeed(event : IServiceControl){
switch(event.svc){
case "currentProduct":
let productsDB = [
{
ID: 1,
Product: "Молоко в бутылке",
Image: "https://images.av.ru/av.ru/product/h9b/ha6/8845530267678.jpg",
Description: "Молоко пастеризованное цельное 3.6–4.6%, «Братья Чебурашкины»"
},
{
ID: 2,
Product: "Нарезной батон",
Image: "https://images.av.ru/av.ru/product/he0/hf9/9247310741534.jpg",
Description: "Батон нарезной Коломенское 400г"
},
{
ID: 3,
Product: "Докторская колбаса",
Image: "https://images.av.ru/av.ru/product/h6f/h39/9115751940126.jpg",
Description: "Колбаса варёная «Докторская» от Татьяны Ерёмкиной, «Наша ферма», Московская область"
},
{
ID: 4,
Product: "Мороженное",
Image: "https://images.av.ru/av.ru/product/hc2/h4f/8845949141022.jpg",
Description: "Мороженое эскимо пломбир ванильный в молочном шоколаде \"Просто Азбука\""
},
{
ID: 5,
Product: "Слабосолёная селёдка",
Description: "Сельдь слабосоленая филе",
Image: "https://images.av.ru/av.ru/product/hda/hb2/9150276010014.jpg"
},
{
ID: 6,
Product: "Молочные сосиски",
Image: "https://images.av.ru/av.ru/product/h48/h91/9136241442846.jpg",
Description: "Сосиски говяжьи, «Углече Поле», 400 г"
},
{
ID: 7,
Product: "Яблоки",
Image: "https://images.av.ru/av.ru/product/h99/he6/8895002738718.jpg",
Description: "Яблоки сезонные"
},
{
ID: 8,
Product: "Огурцы",
Image: "https://images.av.ru/av.ru/product/h42/hd7/8846071037982.jpg",
Description: "Огурцы \"Луховицкие\""
},
{
ID: 9,
Product: "Освежитель воздуха",
Image: "https://www.r-ulybka.ru/upload/iblock/56b/56bfa1e473e2fbe65c3ede8e5a121fed.jpg",
Description: "ОСВЕЖИТЕЛЬ ВОЗДУХА MAGIC BOOM \" ЛУГОВЫЕ ЦВЕТЫ \" 300МЛ"
},
{
ID: 10,
Product: "Свежий минтай",
Image: "https://images.av.ru/av.ru/product/hcf/h9d/8971015061534.jpg",
Description: "Минтай Borealis филе без кожи с/м 1/10"
},
{
ID: 11,
Product: "Салями",
Image: "https://images.av.ru/av.ru/product/h3c/h77/8995272654878.jpg",
Description: "Колбаса полукопченая салями пряная постная, «Вего»"
},
{
ID: 12,
Product: "Горький шоколад",
Image: "https://images.av.ru/av.ru/product/hff/hbe/9076636319774.jpg",
Description: "Шоколад горький Конфаэль Матрешка 60г"
},
{
ID: 13,
Product: "Янтарный сыр",
Image: "https://images.av.ru/av.ru/product/h24/h20/8871172800542.jpg",
Description: "Сыр плавленый 60% Янтарь Ростагроэкспорт 400г"
},
{
ID: 14,
Product: "Пшеничный хлеб",
Image: "https://images.av.ru/av.ru/product/h54/h06/8999233093662.jpg",
Description: "Хлеб белый безглютеновый Dr.Schaer 250г"
},
{
ID: 15,
Product: "Упаковка курицы",
Image: "https://images.av.ru/av.ru/product/he7/ha3/8964524146718.jpg",
Description: "Медальон из филе цыпленка Петелинка"
},
{
ID: 16,
Product: "Сардельки",
Image: "https://images.av.ru/av.ru/product/h27/ha3/9136240525342.jpg",
Description: "Сардельки говяжьи из органической говядины, «Углече Поле»"
},
{
ID: 17,
Product: "Кефир",
Image: "https://images.av.ru/av.ru/product/he6/hea/9285552373790.jpg",
Description: "Кефир Братья Чебурашкины. Семейная ферма 2,5%"
},
{
ID: 18,
Product: "Шоколадные конфеты",
Image: "https://images.av.ru/av.ru/product/hff/h1b/9004081381406.jpg",
Description: "Шоколадные конфеты А. Коркунов Ассорти молочного и темного шоколада 110г"
},
{
ID: 19,
Product: "Яблочный сок",
Image: "https://images.av.ru/av.ru/product/h09/h6c/8992058933278.jpg",
Description: "Сок Я яблочный осветленный 0.97 л"
}
];
let result = [];
productsDB.forEach((item, i, productsDB) => {
if(item.ID === event.query.productId){
result.Image = item.Image;
result.Name = item.Product;
result.Description = item.Description;
}
});
return result;
break;
default: return null; break;
}
}
public eventStart(){
return this.serviceFeed(this.feedStoresCurrent);
}
}import * as React from 'react';
import { IServiceControl } from "../../handlers/ControlInterface";
export class StoreListService{
storeService: { svc: any; query: any; };
constructor(event: any,type: any){
this.storeService = {
svc: event,
query: type
}
}
svc: string | undefined;
query: string | undefined;
protected serviceList(event : IServiceControl){
switch(event.svc){
case "categories":
let list = [
{
ID: 1,
Category: "Молочные продукты"
},
{
ID: 2,
Category: "Хлебобулочные изделия"
},
{
ID: 3,
Category: "Мясные дилекатесы"
},
{
ID: 4,
Category: "Сырные дилекатесы"
},
{
ID: 5,
Category: "Сладости"
},
{
ID: 6,
Category: "Мясная продукция"
},
{
ID: 7,
Category: "Рыбная продукция"
},
{
ID: 8,
Category: "Бытовая химия"
},
{
ID: 9,
Category: "Фрукты и овощи"
},
{
ID: 10,
Category: "Чай и напитки"
}
];
return list;
break;
case "currentCategory":
let products = [
{
ID: 1,
CatID: 1,
Product: "Молоко в бутылке"
},
{
ID: 2,
CatID: 2,
Product: "Нарезной батон"
},
{
ID: 3,
CatID: 3,
Product: "Докторская колбаса"
},
{
ID: 4,
CatID: 5,
Product: "Мороженное"
},
{
ID: 5,
CatID: 7,
Product: "Слабосолёная селёдка"
},
{
ID: 6,
CatID: 3,
Product: "Молочные сосиски"
},
{
ID: 7,
CatID: 9,
Product: "Яблоки"
},
{
ID: 8,
CatID: 9,
Product: "Огурцы"
},
{
ID: 9,
CatID: 8,
Product: "Освежитель воздуха"
},
{
ID: 10,
CatID: 7,
Product: "Свежий минтай"
},
{
ID: 11,
CatID: 3,
Product: "Салями"
},
{
ID: 12,
CatID: 5,
Product: "Горький шоколад"
},
{
ID: 13,
CatID: 4,
Product: "Янтарный сыр"
},
{
ID: 14,
CatID: 2,
Product: "Пшеничный хлеб"
},
{
ID: 15,
CatID: 6,
Product: "Упаковка курицы"
},
{
ID: 16,
CatID: 3,
Product: "Сардельки"
},
{
ID: 17,
CatID: 2,
Product: "Кефир"
},
{
ID: 18,
CatID: 5,
Product: "Шоколадные конфеты"
},
{
ID: 19,
CatID: 10,
Product: "Яблочный сок"
}
];
let result = [];
products.forEach((item, i, productsDB) => {
if(item.CatID === event.query.categoryId){
result.ID = item.ID;
result.Product = item.Product;
}
});
return result;
break;
default: return null; break;
}
}
public eventStart(){
return this.serviceList(this.storeService);
}
}import * as React from 'react';
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Stores } from './pages/stores';
import { CCScreen } from './pages/stores/catView';
import { CPScreen } from './pages/stores/productView';
function StoresScreen({navigation}: {navigation: any}) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff'}}>
<Stores />
</View>
);
}
let icons = {
"stores": ({ focused, size }: { focused: boolean, size: number }) => (
<FontAwesome5 name="store" size={size} color={focused ? '#ff0033' : '#8a8886'} />
)
};
let headerSheet = {
"ui":{
"stores":{
backgroundColor: '#ffffff'
}
},
"text":{
"stores":'#ff0033'
}
};
let headerButtons = {
"stores":() => (
<FontAwesome5
name="search"
onPress={() => alert('Кнопка поиска')}
style={{
fontSize: '160%',
width: '40%'
}}
color="#ff0033"
/>
)
};
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="Home">
<Tab.Screen name="CurrentCategory" component={CCScreen} options={{ tabBarVisible: false, headerTintColor: headerSheet['text']['category'], headerStyle: headerSheet['ui']['category'], headerTitleStyle: {fontWeight: 'normal',fontSize: '130%'}}} />
<Tab.Screen name="CurrentProduct" component={CPScreen} options={{ tabBarVisible: false, headerTintColor: headerSheet['text']['category'], headerStyle: headerSheet['ui']['product'], headerTitleStyle: {fontWeight: 'normal',fontSize: '130%'}, headerRight: headerButtons['product'] }} />
</Tab.Navigator>
</NavigationContainer>
);
}import React, {Component} from 'react';
import { FlatList, Text, View } from 'react-native';
import { BottomTabNavigator, NavigationScreenProp } from 'react-navigation';
import { StoresFeed } from '../../handlers/stores/homepage/Feed';
import { CategoryPage } from '../../handlers/stores/pages/Category';
import { StoreListService } from '../../services/stores/homepage/List';
export interface CCScreenProps {
navigation: NavigationScreenProp<any,any>
}
export class CCScreen extends Component<CCScreenProps, object>{
render(){
const productsList = new StoreListService('currentCategory',null).eventStart();
return (
<React.Fragment>
<View style={screenStyle.list}>
<Text style={pageStyle.listTitle}>{this.props.catName}</Text>
<FlatList data={productsList} renderItem={({item}: {item: any}) => {
if(this,props.cat === item.CatID){ return <Text style={pageStyle.LCList} onClick={() => this.props.navigation.jumpTo('CurrentProduct', {product: item.ID})}>{item.Product}</Text> }
}} />
</View>
</React.Fragment>
);
}
}
const pageStyle = new CategoryPage('ui-change',0).eventStart(),
screenStyle = new CategoryPage('ui-change',1).eventStart();import React, {Component} from 'react';
import { Image, Text, View } from 'react-native';
import { BottomTabNavigator, NavigationScreenProp } from 'react-navigation';
import { StoresFeed } from '../../handlers/stores/homepage/Feed';
import { ProductPage } from '../../handlers/stores/pages/Product';
import { StoreFeedService } from '../../services/stores/homepage/Feed';
export interface CPScreenProps {
navigation: NavigationScreenProp<any,any>
}
export class CPScreen extends Component<CPScreenProps, object>{
render(){
let curQuery = {
productId : this.props.product
}
const productInfo = new StoreFeedService('currentProduct',curQuery).eventStart();
return (
<React.Fragment>
<View style={screenStyle.list}>
<Image style={screenStyle.image} source={{uri: productInfo.Image}}/>
<Text style={pageStyle.title}>{productInfo.Name}</Text>
<Text style={pageStyle.description}>{productInfo.Description}</Text>
</View>
</React.Fragment>
);
}
}
const pageStyle = new ProductPage('ui-change',0).eventStart(),
screenStyle = new ProductPage('ui-change',1).eventStart();