补充手势关闭

src/commo/theme.js

-import React from 'react'
-import { StyleSheet } from 'react-native'
-import { Colors } from 'react-native/Libraries/NewAppScreen'
-import { CardStyleInterpolators } from '@react-navigation/stack'
-import { setUnit } from '../libs/utils'
-import { Icons } from '../assets/icons'
-
-const Style = StyleSheet.create({
-    headerStyle: {
-        backgroundColor: Colors.white
-    }
-})
-
-const headerStyle = {
-    headerTitleAlign: 'center',
-    headerStyle: Style.headerStyle, // 标题栏样式
-    headerTintColor: '#333333', // 标题栏字体颜色
-    headerTitleStyle: { fontSize: setUnit(38) },
-    headerBackImage: () => (<Icons name="zuo" size={30} color="#333" />), // 标题栏返回图标 
-    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS // 设置左右滑动
-}
-
-export { headerStyle }
\ No newline at end of file

src/router/config.js

+import React from 'react'
+import { Colors } from 'react-native/Libraries/NewAppScreen'
+import { CardStyleInterpolators } from '@react-navigation/stack'
+import { setUnit } from '../libs/utils'
+import { Icons } from '../assets/icons'
+
+const headerStyle = {
+    headerTitleAlign: 'center', // 文字居中
+    headerStyle: {
+        backgroundColor: Colors.white 
+    }, // 标题栏样式
+    headerTintColor: '#333333', // 标题栏字体颜色
+    headerTitleStyle: { 
+        fontSize: setUnit(38)
+    },
+    headerBackImage: () => (<Icons name="zuo" size={30} color="#333" />), // 标题栏返回图标 
+    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, // 设置左右滑动
+    gestureDirection: 'horizontal', // 初始化右滑手势配置
+    gestureEnabled: true // 启用右滑返回
+}
+
+export { headerStyle }
\ No newline at end of file

src/router/route/index.js

 // 路由配置
 import React from 'react'
 import { createStackNavigator } from '@react-navigation/stack'
-import { headerStyle } from '../../commo/theme'
+import { headerStyle } from '../config'
 import { TabRouter } from '../tab'
 import { Error404 } from '../../views/error/404'
 import Login from '../../views/login'

src/views/home/style.js

 import { StyleSheet } from 'react-native'
 import { Colors } from 'react-native/Libraries/NewAppScreen'
+import { setUnit } from '../../libs/utils'
 
 const styles = StyleSheet.create({
     scrollView: {
@@ -20,6 +21,21 @@ const styles = StyleSheet.create({
     button: {
         marginBottom: 20,
         marginTop: 20
+    },
+    shoppItem: {
+        width: '100%',
+        padding: setUnit(20)
+    },
+    img: {
+        height: setUnit(500)
+    },
+    shoppTitle: {
+        textAlign: 'center',
+        fontSize: 16,
+        color: 'rgba(0,0,0,.7)',
+        paddingTop: 5,
+        paddingBottom: 5,
+        backgroundColor: '#fff'
     }
 })
 

src/views/home/view.js

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, memo } from 'react';
 import {
   ScrollView,
   View,
   Text,
-  Button
+  TouchableWithoutFeedback,
+  Image
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { styles } from './style'
 
+const ShoppItem = memo(({title, go }) => {
+    return (
+        <TouchableWithoutFeedback onPress={ () => go({ name: title }) } >
+            <View style={styles.shoppItem} >
+                <Image source={{uri: "https://images.b2bwings.com/10170109-22af-467b-8b18-008ec4d09724.jpg"}} style={styles.img} />
+                <Text style={styles.shoppTitle}>{title}</Text>
+            </View>    
+        </TouchableWithoutFeedback>
+    )
+})
 
 const Page: () => React$Node = ({ navigation }) => {
 
@@ -27,9 +38,7 @@ const Page: () => React$Node = ({ navigation }) => {
                 <View>
                     <Text style={ styles.h1 }>信巴迪-基础环境</Text>
                 </View>
-                {list.map(e => (
-                    <Button title={e} onPress={ () => go({ name: e }) } key={e} />
-                ))}
+                {list.map(e => (<ShoppItem title={e} go={go} key={e} />))}
             </ScrollView>    
         </SafeAreaView>
     )