fix responsiveness-related issues

component/chargingPage/chargingPage.tsx

@@ -39,7 +39,7 @@ const ChargingPage = () => {
             edges={['top', 'left', 'right']}
         >
             <ScrollView className="flex-1">
-                <View className="h-[130vh] mx-[5%] space-y-4">
+                <View className="flex-1 mx-[5%] space-y-4">
                     <View className="items-center">
                         <View className="mt-6 mb-4">
                             <Text className="text-lg ">現正充電中:</Text>
@@ -48,6 +48,7 @@ const ChargingPage = () => {
                             TESLA Model 3
                         </Text>
                     </View>
+
                     <View className="items-center">
                         <Text className="text-lg" style={styles.grayColor}>
                             充電中
@@ -70,12 +71,13 @@ const ChargingPage = () => {
                         </Text>
                         <View className="mb-[-10] items-center justify-center ">
                             <Image
-                                source={require('../../assets/car1.png')}
+                                source={require('../../assets/car.png')}
                                 style={{ width: 430, height: 200 }}
                                 resizeMode="contain"
                             />
                         </View>
                     </View>
+
                     <View
                         className="h-[220px] min-h-[20px] border-slate-300 rounded-2xl flex-column"
                         style={{ borderWidth: 1 }}
@@ -141,11 +143,12 @@ const ChargingPage = () => {
                             </Text>
                         </View>
                     </View>
+
                     <View
-                        className="h-[8%] min-h-[20px] border-slate-300 rounded-2xl justify-center"
+                        className="min-h-[20px] border-slate-300 rounded-2xl justify-center p-4"
                         style={{ borderWidth: 1 }}
                     >
-                        <View className="mx-[5%] flex-row items-center justify-between">
+                        <View className="flex-row items-center justify-between ">
                             <View>
                                 <Text className="text-lg">預計充電費用</Text>
 
@@ -159,11 +162,12 @@ const ChargingPage = () => {
                             <Text className="text-3xl">HK$ 175</Text>
                         </View>
                     </View>
+
                     <View
-                        className="h-[10%]  border-slate-300 rounded-2xl justify-center pl-4"
+                        className="border-slate-300 rounded-2xl justify-center p-4"
                         style={{ borderWidth: 1 }}
                     >
-                        <Text className="text-lg ">其他資訊</Text>
+                        <Text className="text-lg pb-1 ">其他資訊</Text>
                         <View className="flex-row">
                             <View className="flex-1 flex-column">
                                 <Text
@@ -185,7 +189,8 @@ const ChargingPage = () => {
                             </View>
                         </View>
                     </View>
-                    <View className="w-full ">
+
+                    <View>
                         <NormalButton
                             onPress={() => {
                                 console.log('完成充電');