V2

App.js

@@ -1,6 +1,5 @@
 import Home from "./components/Home";
 import Content from "./components/Content";
-import AppHeader from "./components/AppHeader";
 import Paragraph from "./components/Paragraph";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
@@ -14,11 +13,15 @@ export default function App() {
         <Stack.Screen
           name="Home"
           component={Home}
-          options={{ header: () => <AppHeader /> }}
+          options={{headerShown: false}}
         />
         <Stack.Screen name="Morphemics" component={Content} />
         <Stack.Screen name="Phonetics" component={Content} />
-        <Stack.Screen name="Spelling" component={Content} />
+        <Stack.Screen name="Lexicology" component={Content} />
+        <Stack.Screen name="Orthography" component={Content} />
+        <Stack.Screen name="Morphology" component={Content} />
+        <Stack.Screen name="Syntax" component={Content} />
+        <Stack.Screen name="Culture" component={Content} />
         <Stack.Screen name="Paragraph" component={Paragraph} />
       </Stack.Navigator>
     </NavigationContainer>

components/AppFooter.js

@@ -0,0 +1,27 @@
+import { StyleSheet, View, Button } from "react-native";
+import SvgButton from './SvgButton'
+
+export default function AppFooter() {
+  return (
+    <View style={styles.footer}>
+      <SvgButton size={26} name='exit' />
+      <SvgButton size={26} name='mod' />
+      <SvgButton size={26} name='bookmark' />
+      <SvgButton size={26} name='search' />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  footer: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    borderTopWidth: 1,
+    borderColor: 'gray',
+    paddingTop: 3,
+    paddingBottom: 3
+  },
+  name: {
+    fontSize: 16,
+  },
+});

components/Content.js

@@ -1,28 +1,37 @@
-import {
-  FlatList,
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-} from "react-native";
+import { StyleSheet, Text, View, Pressable } from "react-native";
 import { index } from "./contents/data/index";
 
+const Separator = () => <View style={styles.separator} />;
 
 export default function Phonetics({ navigation, route }) {
-  const routeName = route.name
+  const routeName = route.name;
 
   return (
     <View>
       {index[routeName].map((item, i) => (
-        <TouchableOpacity
+        <Pressable
           onPress={() => {
-            navigation.navigate("Note", { name: routeName, id: i });
+            navigation.navigate("Paragraph", { name: routeName, id: i });
           }}
           key={i}
+          style={styles.btn}
         >
           <Text>{item.title}</Text>
-        </TouchableOpacity>
+          <Separator />
+        </Pressable>
       ))}
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  btn: {
+    paddingVertical: 12,
+    paddingHorizontal: 30,
+  },
+  separator: {
+    marginVertical: 8,
+    borderBottomColor: "#737373",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+});

components/Home.js

@@ -1,19 +1,47 @@
-import { StyleSheet, Text, View, Button } from "react-native";
+import { View, ScrollView } from "react-native";
 import MenuButton from "./MenuButton";
+import AppFooter from './AppFooter'
 
 export default function Home({ navigation, route }) {
-  console.log(route)
   return (
-    <>
-      <MenuButton title="Фонетика" navTo="Phonetics" navigation={navigation} />
-      <Button
-        title="Морфология"
-        onPress={() => navigation.navigate("Morphemics")}
+    <View style={{flex: 1, justifyContent: 'space-between'}}>
+    <ScrollView>
+      <MenuButton
+        title="Фонетика. Графика"
+        navTo="Phonetics"
+        navigation={navigation}
+      />
+      <MenuButton
+        title="Морфемика. Словообразование"
+        navTo="Morphemics"
+        onPress={() => navigation.navigate(navigation)}
       />
-      <Button
+      <MenuButton
+        title="Лексикология"
+        navTo="Lexicology"
+        onPress={() => navigation.navigate(navigation)}
+      />
+      <MenuButton
         title="Орфография"
         onPress={() => navigation.navigate("Spelling")}
       />
-    </>
+      <MenuButton
+        title="Морфология"
+        navTo="Morphology"
+        onPress={() => navigation.navigate(navigation)}
+      />
+      <MenuButton
+        title="Синтаксис"
+        navTo="Syntax"
+        onPress={() => navigation.navigate(navigation)}
+      />
+      <MenuButton
+        title="Культура речи"
+        navTo="Culture"
+        onPress={() => navigation.navigate(navigation)}
+      />
+    </ScrollView>
+    <AppFooter />
+    </View>
   );
 }

components/MenuButton.js

@@ -1,11 +1,57 @@
-import { Button, View } from "react-native";
+import { View, StyleSheet, Pressable, Text } from "react-native";
+import { Shadow } from "react-native-shadow-2";
 
-export default function MenuButton({ navigation, title, onPress, navTo }) {
-  console.log("hi");
+export default function MenuButton({ navigation, title, navTo }) {
   return (
-    <View>
-      <Button title={title} onPress={() => navigation.navigate(navTo)} />
-      <Button title="?" />
-    </View>
+    <Shadow
+      distance={4}
+      style={{
+        alignSelf: "stretch",
+        flexDirection: "row",
+        borderRadius: 7,
+      }}
+      containerStyle={{ margin: 10 }}
+      offset={[0, 1]}
+      corners={"topStart"}
+    >
+      <Pressable
+        style={[styles.button, styles.title]}
+        onPress={() => navigation.navigate(navTo)}
+      >
+        <Text style={styles.text}>{title}</Text>
+      </Pressable>
+      <Pressable style={[styles.button, styles.quest]}>
+        <Text style={styles.text}>?</Text>
+      </Pressable>
+    </Shadow>
   );
 }
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 2,
+    backgroundColor: "white",
+  },
+  title: {
+    borderTopLeftRadius: 6,
+    borderBottomLeftRadius: 6,
+    flexGrow: 1,
+  },
+  quest: {
+    borderTopRightRadius: 6,
+    borderBottomRightRadius: 6,
+    width: 40,
+    borderLeftWidth: 0.2,
+    borderLeftColor: 'gray'
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 21,
+    fontWeight: "bold",
+    letterSpacing: 0.25,
+    color: "black",
+  },
+});

components/Paragraph.js

@@ -1,13 +1,14 @@
-import { StyleSheet, Text, View } from "react-native";
+import { ScrollView } from "react-native";
 import { index } from "./contents/data/index";
 
-export default function Note({ navigation, route }) {
+export default function Paragraph({ navigation, route }) {
   const name = route.params.name;
   const id = route.params.id;
-  console.log(route.params.name)
   return (
-    <View>
-      <Text>{index[name][id].text}</Text>
-    </View>
+    <ScrollView>
+      {index[name][id].text}
+    </ScrollView>
   );
 }
+
+

components/SvgButton.js

@@ -0,0 +1,14 @@
+import { View, Pressable} from 'react-native'
+import { icon } from './contents/assets/icon'
+import Svg, { Path } from "react-native-svg";
+
+export default function SvgButton({ name, size, onPress }) {
+    return (
+    <Pressable>
+        <View>
+            <Svg height={size} width={size} viewBox= '0 0 16 16' fill='black'>
+                {icon[name]}
+            </Svg>
+        </View>
+    </Pressable>
+    )}

components/contents/assets/bookmark.js

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg"
+
+const SvgComponent = () => (
+  <Svg
+    width={26}
+    height={26}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox= '0 0 16 16'
+  >
+    <Path
+      fillRule="evenodd"
+      d="M6 8V1h1v6.117L8.743 6.07a.5.5 0 0 1 .514 0L11 7.117V1h1v7a.5.5 0 0 1-.757.429L9 7.083 6.757 8.43A.5.5 0 0 1 6 8z"
+    />
+    <Path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z" />
+    <Path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z" />
+  </Svg>
+)
+
+export default SvgComponent