引入字体图标

App.js

@@ -7,7 +7,7 @@ import {
 } from '@react-navigation/stack'
 import { UseAPIProvider } from '@umijs/use-request'
 
-import { ThemeProvider } from 'react-native-paper'
+import { Provider as PaperProvider } from 'react-native-paper'
 import { Provider } from '@ant-design/react-native'
 import useModel from 'flooks'
 import { useUpdateEffect } from '@umijs/hooks'
@@ -64,7 +64,7 @@ export default function App() {
             requestMethod: request,
           }}
         >
-          <ThemeProvider theme={theme}>
+          <PaperProvider theme={theme}>
             <Provider>
               {Platform.OS !== 'ios' && (
                 <StatusBar translucent={false} backgroundColor="#FFC21C" />
@@ -85,7 +85,7 @@ export default function App() {
                 </Stack.Navigator>
               </NavigationContainer>
             </Provider>
-          </ThemeProvider>
+          </PaperProvider>
         </UseAPIProvider>
       </View>
     )

components/Button.js

@@ -0,0 +1,150 @@
+import * as React from 'react'
+import { View } from 'react-native'
+import { Paragraph, Button, Caption, withTheme, Text } from 'react-native-paper'
+
+function MyButton(props) {
+  const {
+    children,
+    onPress,
+    outline,
+    text,
+    size,
+    type,
+    theme,
+    block,
+    style,
+  } = props
+  let { fontColor } = props
+  const { colors } = theme
+  let contentStyle = {}
+  let color = ''
+  let mode = 'contained'
+  let childNode
+  let dark = true
+
+  switch (type) {
+    case 'primary':
+      color = colors.primary
+      break
+    case 'info':
+      if (outline || text) {
+        color = colors.info
+      } else {
+        color = colors.lightInfo
+        fontColor = colors.info
+      }
+      break
+    case 'danger':
+      color = colors.error
+      break
+    default:
+      color = colors.primary
+      break
+  }
+
+  if (outline) {
+    mode = 'outline'
+    dark = false
+  }
+  if (text) {
+    mode = 'text'
+    dark = false
+  }
+
+  switch (size) {
+    case 'mini':
+      contentStyle = { height: 22 }
+      childNode = () => (
+        <Text
+          style={[
+            { fontSize: 10 },
+            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
+          ]}
+        >
+          {children}
+        </Text>
+      )
+      break
+    case 'small':
+      contentStyle = { height: 30 }
+      childNode = () => (
+        <Caption
+          style={[
+            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
+          ]}
+        >
+          {children}
+        </Caption>
+      )
+      break
+    case 'normal':
+      contentStyle = { width: 120, height: 44 }
+      childNode = () => (
+        <Paragraph
+          style={[
+            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
+          ]}
+        >
+          {children}
+        </Paragraph>
+      )
+      break
+    default:
+      contentStyle = { width: 120, height: 30 }
+      childNode = () => (
+        <Paragraph
+          style={[
+            fontColor ? { color: fontColor } : { color: dark ? '#fff' : color },
+          ]}
+        >
+          {children}
+        </Paragraph>
+      )
+      break
+  }
+
+  if (block) {
+    delete contentStyle.width
+    return (
+      <Button
+        mode={mode}
+        color={color}
+        contentStyle={contentStyle}
+        onPress={onPress}
+        style={{
+          elevation: 0,
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowOpacity: 0,
+        }}
+      >
+        {childNode()}
+      </Button>
+    )
+  } else {
+    return (
+      <View style={{ ...style }}>
+        <Button
+          mode={mode}
+          color={color}
+          contentStyle={contentStyle}
+          onPress={onPress}
+          style={{
+            elevation: 0,
+            shadowOffset: {
+              width: 0,
+              height: 0,
+            },
+            shadowOpacity: 0,
+          }}
+        >
+          {childNode()}
+        </Button>
+      </View>
+    )
+  }
+}
+
+export default withTheme(MyButton)

components/HomeHeader.js

@@ -25,6 +25,14 @@ export default function Header() {
       <Appbar.Header
         theme={{ colors: { primary: '#fff' } }}
         statusBarHeight={Platform.OS === 'ios' ? Constants.statusBarHeight : 0}
+        style={{
+          elevation: 0,
+          shadowOffset: {
+            width: 0,
+            height: 0,
+          },
+          shadowOpacity: 0,
+        }}
       >
         <Appbar.Content title={TlocationWord} titleStyle={{ fontSize: 16 }} />
 

components/SvgIcon.js

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { svg, path } from 'react-native-svg'
+import { withTheme } from 'react-native-paper'
+import names from '../Utils/SvgUtils'
+
+function Icon(props) {
+  const { name, width, height, type, theme } = props
+  let { color } = props
+  const { colors } = theme
+  if (type) {
+    color = colors[type]
+  }
+  return (
+    <svg width={width || 32} height={height || 32} viewBox="0 0 1024 1024">
+      <path fill={color || '#000000'} d={names[name || 'home']} />
+    </svg>
+  )
+}
+
+export default withTheme(Icon)

components/Text.js

@@ -0,0 +1,70 @@
+import * as React from 'react'
+import {
+  Headline,
+  Paragraph,
+  Subheading,
+  Caption,
+  withTheme,
+  Text,
+} from 'react-native-paper'
+
+function MyText(props) {
+  const { type, size, children, bold } = props
+  let { color, theme, style } = props
+  const { colors } = theme
+  if (type) {
+    color = colors[type]
+  }
+
+  if (color) {
+    theme = {
+      ...theme,
+      colors: {
+        ...theme.colors,
+        text: color,
+      },
+    }
+  }
+  if (bold) {
+    style = {
+      ...style,
+      fontWeight: 'bold',
+    }
+  }
+
+  switch (size) {
+    case 'h1':
+      // 24
+      return (
+        <Headline theme={theme} style={{ ...style }}>
+          {children}
+        </Headline>
+      )
+    case 's1':
+      // 16
+      return (
+        <Subheading theme={theme} style={{ ...style }}>
+          {children}
+        </Subheading>
+      )
+    case 'c1':
+      // 12
+      return (
+        <Caption theme={theme} style={{ ...style }}>
+          {children}
+        </Caption>
+      )
+    case 'c2':
+      // 10
+      return (
+        <Text theme={theme} medium style={[{ fontSize: 10 }, { ...style }]}>
+          {children}
+        </Text>
+      )
+    default:
+      // 14
+      return <Paragraph theme={theme}>{children}</Paragraph>
+  }
+}
+
+export default withTheme(MyText)

constants/Theme.js

@@ -8,6 +8,8 @@ const theme = {
     accent: '#03dac4',
     error: '#B00020',
     text: '#000',
+    info: '#B4B4B4',
+    lightInfo: '#F0F0F0',
   },
 }
 

navigation/BottomTabNavigator.jsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
-import TabBarIcon from '../components/TabBarIcon'
 import HomeScreen from '../screens/Home/HomeScreen'
 import LinksScreen from '../screens/Home/LinksScreen'
+import Icon from '../components/SvgIcon'
+import Text from '../components/Text'
 
 const BottomTab = createBottomTabNavigator()
 
@@ -13,9 +14,13 @@ export default function BottomTabNavigator() {
         name="Home"
         component={HomeScreen}
         options={{
-          title: 'Get Started',
+          title: ({ focused }) => (
+            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
+              外卖
+            </Text>
+          ),
           tabBarIcon: ({ focused }) => (
-            <TabBarIcon focused={focused} name="md-code-working" />
+            <Icon type={focused ? 'primary' : 'info'} name="home" />
           ),
         }}
       />
@@ -23,9 +28,27 @@ export default function BottomTabNavigator() {
         name="Links"
         component={LinksScreen}
         options={{
-          title: 'Resources',
+          title: ({ focused }) => (
+            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
+              订单
+            </Text>
+          ),
+          tabBarIcon: ({ focused }) => (
+            <Icon type={focused ? 'primary' : 'info'} name="order" />
+          ),
+        }}
+      />
+      <BottomTab.Screen
+        name="User"
+        component={LinksScreen}
+        options={{
+          title: ({ focused }) => (
+            <Text size="c2" bold type={focused ? 'primary' : 'info'}>
+              我的
+            </Text>
+          ),
           tabBarIcon: ({ focused }) => (
-            <TabBarIcon focused={focused} name="md-book" />
+            <Icon type={focused ? 'primary' : 'info'} name="user" />
           ),
         }}
       />

package-lock.json

@@ -3060,6 +3060,11 @@
       "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.16.0.tgz",
       "integrity": "sha512-j4nzWIqEFpLSbdhUApHRGDwfXbV8ALhqOn+FY5L6XBdKPAXU9BpGgFSbDsgqogfqPPR9R2WooseWCsfhfEC6uQ=="
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
     "bower": {
       "version": "1.8.8",
       "resolved": "https://registry.npmjs.org/bower/-/bower-1.8.8.tgz",
@@ -3732,6 +3737,38 @@
         "isobject": "^3.0.1"
       }
     },
+    "css-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^3.2.1",
+        "domutils": "^1.7.0",
+        "nth-check": "^1.0.2"
+      }
+    },
+    "css-tree": {
+      "version": "1.0.0-alpha.39",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.39.tgz",
+      "integrity": "sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==",
+      "requires": {
+        "mdn-data": "2.0.6",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "css-what": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
+      "integrity": "sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg=="
+    },
     "cssom": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
@@ -3933,6 +3970,27 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
+        }
+      }
+    },
+    "domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+    },
     "domexception": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
@@ -3942,6 +4000,15 @@
         "webidl-conversions": "^4.0.2"
       }
     },
+    "domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "requires": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -3994,6 +4061,11 @@
         "once": "^1.4.0"
       }
     },
+    "entities": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
+      "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
+    },
     "envinfo": {
       "version": "7.5.1",
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.5.1.tgz",
@@ -7367,6 +7439,11 @@
         "buffer-alloc": "^1.1.0"
       }
     },
+    "mdn-data": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.6.tgz",
+      "integrity": "sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA=="
+    },
     "mem": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
@@ -8393,6 +8470,14 @@
         "path-key": "^2.0.0"
       }
     },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "requires": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -9699,6 +9784,15 @@
         "prop-types": "^15.5.6"
       }
     },
+    "react-native-svg": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-11.0.1.tgz",
+      "integrity": "sha512-XriIwSoe9eTtKyqxpNC6POSOqmXAB9mZQOm5tMoaimEqQOMfzgYrBoF9nY6VPGmaH5dRlWBqnnBf389APiZFcQ==",
+      "requires": {
+        "css-select": "^2.1.0",
+        "css-tree": "^1.0.0-alpha.39"
+      }
+    },
     "react-native-swipeout": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/react-native-swipeout/-/react-native-swipeout-2.3.6.tgz",

package.json

@@ -52,7 +52,8 @@
     "react-native-tab-view": "^2.14.2",
     "react-native-ui-lib": "^5.8.1",
     "react-native-web": "^0.11.7",
-    "umi-request": "^1.3.3"
+    "umi-request": "^1.3.3",
+    "react-native-svg": "11.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.1",

screens/Home/HomeScreen.jsx

@@ -2,19 +2,25 @@ import * as WebBrowser from 'expo-web-browser'
 import * as React from 'react'
 import { Platform, StyleSheet } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
-import { Button, Paragraph, Menu, Divider, Provider } from 'react-native-paper'
+import { WhiteSpace, WingBlank } from '@ant-design/react-native'
+import { Paragraph, Menu, Divider, Provider, Text } from 'react-native-paper'
+import Button from '../../components/Button'
 import Header from '../../components/HomeHeader'
+import Icon from '../../components/SvgIcon'
 
 export default function HomeScreen() {
   return (
-    <Provider>
-      <ScrollView style={styles.container}>
-        <Header />
-      </ScrollView>
-    </Provider>
+    <ScrollView style={styles.container}>
+      <Header />
+      <WingBlank>
+        <Button block size="small" type="info" onPress={() => {}}>
+          搜索
+        </Button>
+        <Icon />
+      </WingBlank>
+    </ScrollView>
   )
 }
-
 HomeScreen.navigationOptions = {
   header: null,
 }
@@ -24,86 +30,11 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#fff',
   },
-  developmentModeText: {
-    marginBottom: 20,
-    color: 'rgba(0,0,0,0.4)',
-    fontSize: 14,
-    lineHeight: 19,
-    textAlign: 'center',
-  },
-  contentContainer: {
-    paddingTop: 30,
-  },
-  welcomeContainer: {
-    alignItems: 'center',
-    marginTop: 10,
-    marginBottom: 20,
-  },
-  welcomeImage: {
-    width: 100,
-    height: 80,
-    resizeMode: 'contain',
-    marginTop: 3,
-    marginLeft: -10,
-  },
-  getStartedContainer: {
-    alignItems: 'center',
-    marginHorizontal: 50,
-  },
-  homeScreenFilename: {
-    marginVertical: 7,
-  },
-  codeHighlightText: {
-    color: 'rgba(96,100,109, 0.8)',
-  },
-  codeHighlightContainer: {
-    backgroundColor: 'rgba(0,0,0,0.05)',
-    borderRadius: 3,
-    paddingHorizontal: 4,
-  },
-  getStartedText: {
-    fontSize: 17,
-    color: 'rgba(96,100,109, 1)',
-    lineHeight: 24,
-    textAlign: 'center',
-  },
-  tabBarInfoContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    ...Platform.select({
-      ios: {
-        shadowColor: 'black',
-        shadowOffset: { width: 0, height: -3 },
-        shadowOpacity: 0.1,
-        shadowRadius: 3,
-      },
-      android: {
-        elevation: 20,
-      },
-    }),
-    alignItems: 'center',
-    backgroundColor: '#fbfbfb',
-    paddingVertical: 20,
-  },
-  tabBarInfoText: {
-    fontSize: 17,
-    color: 'rgba(96,100,109, 1)',
-    textAlign: 'center',
-  },
-  navigationFilename: {
-    marginTop: 5,
-  },
-  helpContainer: {
-    marginTop: 15,
-    alignItems: 'center',
-  },
-  helpLink: {
-    paddingVertical: 15,
+  contentStyle: {
+    height: 20,
   },
-  helpLinkText: {
-    fontSize: 14,
-    color: '#2e78b7',
+  text: {
+    fontSize: 10,
+    color: '#AAAAAA',
   },
 })

screens/Login/BackPasswordScreen.jsx

@@ -2,8 +2,9 @@ import * as WebBrowser from 'expo-web-browser'
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { WingBlank, InputItem } from '@ant-design/react-native'
-import { Caption, Button, Paragraph } from 'react-native-paper'
+import { Caption, Paragraph } from 'react-native-paper'
 import Header from '../../components/Header'
+import Button from '../../components/Button'
 
 export default function BackPasswordScreen() {
   const [phone, setphone] = React.useState()
@@ -64,12 +65,7 @@ export default function BackPasswordScreen() {
             </InputItem>
 
             <View style={[styles.btn]}>
-              <Button
-                dark
-                mode="contained"
-                contentStyle={{ width: 120 }}
-                onPress={() => {}}
-              >
+              <Button size="normal" style={styles.btn} onPress={() => {}} block>
                 确定
               </Button>
             </View>
@@ -88,9 +84,6 @@ const styles = StyleSheet.create({
     paddingTop: 20,
   },
   btn: {
-    paddingLeft: 80,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
     marginTop: 40,
   },
 })

screens/Login/LoginScreen.jsx

@@ -2,11 +2,12 @@ import * as WebBrowser from 'expo-web-browser'
 import * as React from 'react'
 import { StyleSheet, View, StatusBar, Platform, Image } from 'react-native'
 import { Flex, WingBlank, InputItem } from '@ant-design/react-native'
-import { Card, Paragraph, Button, Caption } from 'react-native-paper'
+import { Card, Paragraph, Caption } from 'react-native-paper'
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 import useModel from 'flooks'
 import Toast from '../../flooks/Toast'
 import user from '../../flooks/User'
+import Button from '../../components/Button'
 
 const Tab = createMaterialTopTabNavigator()
 
@@ -17,15 +18,17 @@ export default function LoginScreen({ navigation }) {
   const btnList = () => (
     <View style={styles.btn}>
       <Button
-        mode="ghost"
+        text
+        size="small"
+        type="info"
         onPress={() => {
           navigation.navigate('BackPassword')
         }}
       >
-        <Caption style={{ color: '#B4B4B4' }}>忘记密码</Caption>
+        忘记密码
       </Button>
-      <Button mode="ghost" onPress={() => {}}>
-        <Caption style={{ color: '#B4B4B4' }}>用户注册</Caption>
+      <Button text size="small" type="info" onPress={() => {}}>
+        用户注册
       </Button>
     </View>
   )
@@ -134,15 +137,8 @@ const LoginPassword = ({ route }) => {
 
       {btnList()}
 
-      <View style={[styles.btn, { marginTop: 20 }]}>
-        <Button
-          mode="contained"
-          dark
-          contentStyle={{ width: 120 }}
-          onPress={submit}
-        >
-          登录
-        </Button>
+      <View style={[styles.btn, styles.sub]}>
+        <Button onPress={submit}>登录</Button>
       </View>
     </View>
   )
@@ -192,15 +188,8 @@ const LoginCode = ({ route }) => {
         <Paragraph>验证码</Paragraph>
       </InputItem>
       {btnList()}
-      <View style={[styles.btn, { marginTop: 20 }]}>
-        <Button
-          mode="contained"
-          dark
-          contentStyle={{ width: 120 }}
-          onPress={submit}
-        >
-          登录
-        </Button>
+      <View style={[styles.btn, styles.sub]}>
+        <Button onPress={submit}>登录</Button>
       </View>
     </View>
   )
@@ -235,8 +224,13 @@ const styles = StyleSheet.create({
     paddingBottom: 20,
   },
   btn: {
-    paddingLeft: 80,
+    paddingLeft: 70,
     flexDirection: 'row',
     justifyContent: 'space-between',
+    marginTop: 5,
+  },
+  sub: {
+    marginTop: 10,
+    marginLeft: 10,
   },
 })