Какой код добавить в src / маршруты / шаблоны / <category>/ - PullRequest
1 голос
/ 19 мая 2019

Я - младший разработчик реагирования, и я только недавно закончил какой-то проект, созданный реактивом-нативом, который также использует приставку.

Вот структура проекта:

src/
├── App.js
├── Router.js
├── actionTypes
│   └── Structure.ts
├── actions
│   ├── Calculations.ts
│   └── Structure.ts
├── components
│   ├── category
│   │   ├── CategoryItem.tsx
│   │   └── index.ts
│   ├── common
│   │   ├── Input.tsx
│   │   ├── Text.tsx
│   │   ├── TopBar.tsx
│   │   └── index.ts
│   ├── subcategory
│   │   ├── SubCategoryItem.tsx
│   │   └── index.ts
│   └── topic
│       ├── TopicItem.tsx
│       └── index.ts
├── data
│   ├── Categories.ts
│   ├── SubCategories.ts
│   └── Topics.ts
├── reducers
│   ├── StructureReducer.ts
│   └── index.ts
└── routes
    ├── Category.tsx
    ├── SubCategory.tsx
    ├── Topic.tsx
    ├── index.ts
    └── patterns
        ├── some_category
        │   ├── some_topic.ts

В общем, приложение разработано для того, чтобы иметь категории, подкатегории, а затем темы, и чего не хватает, так это содержания темы, которое мне нужно добавить.

Ниже приведен фрагмент кода для data/Topics.ts:

export interface TopicInterface {
    background: Function,
    icon: Function,
    numColumns: number,
    data: TopicDataInterface
}

export interface TopicDataInterface {
    name: string,
    origin: string
}

const Topics: any = {
    some_category: {
        background: require('../images/backgrounds/background.png'),
        numColumns: 1,
        name: i18n.t('some_category'),
        data: [
            {
                name: i18n.t('some_topic'),
                origin: 'some_topic',
            }
        ]
    },

};

export default Topics;

И components/topic/TopicItem.tsx:

import React from 'react';
import {
    ImageBackground,
    TouchableOpacity,
    View,
    StyleSheet,
    ImageStyle,
    ViewStyle,
    TextStyle,
} from 'react-native';
import {Text} from "../common";
import {
    getSubCategoryItemDimensions,
} from "../../actions/Calculations";
import {TopicDataInterface} from "../../data/Topics";

interface Props {
    topic: TopicDataInterface,
    onTopicPress: Function
}

interface Style {
    container: ImageStyle,
    categoryNameContainer: ViewStyle,
    categoryName: TextStyle,
}

const TopicItem = ({topic, onTopicPress}: Props) => (
    <TouchableOpacity
        onPress={() => onTopicPress(topic.origin)}
    >
        <ImageBackground
            source={require('../../images/square.png')}
            style={styles.container}
        >
            <View style={styles.categoryNameContainer}>
                <Text style={styles.categoryName}>
                    {topic.name}
                </Text>
            </View>
        </ImageBackground>
    </TouchableOpacity>
);

export default TopicItem;


const styles = StyleSheet.create<Style>({
    container: getSubCategoryItemDimensions(),
    categoryNameContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    categoryName: {
        textAlign: 'center',
    }
});

Пока я вижу, что интересное местобыть routes/patterns/ dir.

Я предполагаю, что должно быть содержание тем, но уже существующий файл там пуст.Понятия не имею, подходит ли это для этого место и как должен выглядеть окончательный код.

Как реализовать содержание темы?

Пожалуйста, дайте мне знать, если я поделюсь еще кодом здесь.

...