bug fix issue #1

Author: geastwood

src/Components/Hospital.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+import { Text, View, StyleSheet, Modal, Dimensions } from 'react-native';
 import { Card, Button } from 'react-native-elements';
 import { colors } from '../Theme';
 import Supply from './Supply';
 import moment from 'moment';
+import HospitalDetail from './HospitalDetail';
+const { height } = Dimensions.get('window');
 
 type PropTypes = {
   item: HospitalType;
-  onClick: (hospital: HospitalType) => void;
 };
 
 const styles = StyleSheet.create({
@@ -29,8 +30,9 @@ const styles = StyleSheet.create({
   },
 });
 
-function Hospital({ item, onClick }: PropTypes) {
+function Hospital({ item }: PropTypes) {
   const { supplies } = item;
+  const [visible, setVisible] = useState(false);
   return (
     <Card title={item.hospital}>
       <View style={styles.subtitleContainer}>
@@ -52,7 +54,36 @@ function Hospital({ item, onClick }: PropTypes) {
         </View>
       </View>
       <View style={{ paddingHorizontal: 30, paddingTop: 10 }}>
-        <Button type="outline" title="查看详情" onPress={() => onClick(item)} />
+        <Button
+          type="outline"
+          title="查看详情"
+          onPress={() => setVisible(true)}
+        />
+        <Modal
+          animationType="fade"
+          presentationStyle="formSheet"
+          transparent={false}
+          onDismiss={() => {
+            setVisible(false);
+          }}
+          onRequestClose={() => {
+            setVisible(false);
+          }}
+          visible={visible}>
+          <View style={{ padding: 16, justifyContent: 'space-between' }}>
+            <View style={{ height: height - 150 }}>
+              <HospitalDetail item={item} />
+            </View>
+            <View>
+              <Button
+                title="关闭详情"
+                onPress={() => {
+                  setVisible(false);
+                }}
+              />
+            </View>
+          </View>
+        </Modal>
       </View>
     </Card>
   );

src/Layouts/Hospital.tsx

@@ -26,7 +26,6 @@ function HospitalLayout() {
     'https://vuqjf9paihid.leanapp.cn/supplies/requirement',
   );
   const [refreshing, setRefreshing] = useState(false);
-  const [selected, setSelection] = useState<HospitalType | null>(null);
 
   const hospitals: HospitalType[] = data || [];
 
@@ -38,11 +37,8 @@ function HospitalLayout() {
     });
   }
 
-  function onClick(hospital: HospitalType) {
-    setSelection(hospital);
-  }
   function renderItem({ item }: { item: HospitalType }) {
-    return <Hospital item={item} onClick={onClick} />;
+    return <Hospital item={item} />;
   }
 
   return (
@@ -67,32 +63,6 @@ function HospitalLayout() {
           ) : null
         }
       />
-
-      <Modal
-        animationType="slide"
-        presentationStyle="formSheet"
-        transparent={false}
-        onDismiss={() => {
-          setSelection(null);
-        }}
-        onRequestClose={() => {
-          setSelection(null);
-        }}
-        visible={selected !== null}>
-        <View style={{ padding: 16, justifyContent: 'space-between' }}>
-          <View style={{ height: height - 150 }}>
-            {selected && <HospitalDetail item={selected} />}
-          </View>
-          <View>
-            <Button
-              title="关闭详情"
-              onPress={() => {
-                setSelection(null);
-              }}
-            />
-          </View>
-        </View>
-      </Modal>
     </StatusBarSafeLayout>
   );
 }