Я - младший разработчик реагирования, и я только недавно закончил какой-то проект, созданный реактивом-нативом, который также использует приставку.
Вот структура проекта:
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.
Я предполагаю, что должно быть содержание тем, но уже существующий файл там пуст.Понятия не имею, подходит ли это для этого место и как должен выглядеть окончательный код.
Как реализовать содержание темы?
Пожалуйста, дайте мне знать, если я поделюсь еще кодом здесь.