测量参数设置页面

app/(tabs)/(home)/save.tsx

@@ -1,76 +1,103 @@
 import { useState } from 'react';
 import { View, Text, Pressable, Image, TextInput, StyleSheet } from 'react-native';
+import {
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicator,
+  SelectDragIndicatorWrapper,
+  SelectItem,
+} from '@/components/ui/select';
+import { ChevronRightIcon } from '@/components/ui/icon';
+import { Button, ButtonText } from '@/components/ui/button';
 
 export default function Save() {
   const [selectedLanguage, setSelectedLanguage] = useState();
   return (
-    <View style={styles.model}>
-      
-      <View style={styles.itemBox}>
-        <Text style={styles.itemTitle}>测量名称</Text>
-        <TextInput style={styles.itemInput} placeholder="请填写"></TextInput>
-      </View>
-      <View style={styles.itemBox} >
-        <Text style={styles.itemTitle}>轨型</Text>
+    <View className="bg-[#f6f7fb]">
+      <View className="px-5 mt-2 bg-white">
+        <View style={styles.itemBox}>
+          <Text>测量名称</Text>
+          <TextInput style={styles.itemInput} placeholder="请填写"></TextInput>
+        </View>
+        <View style={styles.itemBox}>
+          <Select className="h-full">
+            <SelectTrigger className='h-full border-b-0' variant="underlined" size="md">
+              <View className="flex-row items-center w-full">
+                <Text>轨型</Text>
+                <Text className="ml-auto">60轨</Text>
+                <SelectIcon className="ml-2" as={ChevronRightIcon} />
+              </View>
+            </SelectTrigger>
+            <SelectPortal>
+              <SelectBackdrop />
+              <SelectContent>
+                <SelectDragIndicatorWrapper>
+                  <SelectDragIndicator />
+                </SelectDragIndicatorWrapper>
+                <SelectItem label="UX Research" value="ux" />
+                <SelectItem label="Web Development" value="web" />
+                <SelectItem label="Cross Platform" value="Development Process" />
+                <SelectItem label="UI Designing" value="ui" isDisabled={true} />
+                <SelectItem label="Backend Development" value="backend" />
+              </SelectContent>
+            </SelectPortal>
+          </Select>
+        </View>
+        <View style={styles.itemBox}>
+          <Select className="h-full">
+            <SelectTrigger className='h-full border-b-0' variant="underlined" size="md">
+              <View className="flex-row items-center w-full">
+                <Text>核校方式</Text>
+                <Text className="ml-auto">按磨耗校核钢轨-右基准</Text>
+                <SelectIcon className="ml-2" as={ChevronRightIcon} />
+              </View>
+            </SelectTrigger>
+            <SelectPortal>
+              <SelectBackdrop />
+              <SelectContent>
+                <SelectDragIndicatorWrapper>
+                  <SelectDragIndicator />
+                </SelectDragIndicatorWrapper>
+                <SelectItem label="UX Research" value="ux" />
+                <SelectItem label="Web Development" value="web" />
+                <SelectItem label="Cross Platform" value="Development Process" />
+                <SelectItem label="UI Designing" value="ui" isDisabled={true} />
+                <SelectItem label="Backend Development" value="backend" />
+              </SelectContent>
+            </SelectPortal>
+          </Select>
+        </View>
       </View>
-      <View style={styles.itemBox}>
-        <Text style={styles.itemTitle}>核校方式</Text>
-        <TextInput style={styles.itemInput} placeholder="请填写"></TextInput>
-      </View>
-      <Pressable
-        style={({ pressed }) => [styles.btn, { opacity: pressed ? 0.7 : 1 }]}
-        onPress={() => {}}>
-        <Text style={styles.btnText}>确定</Text>
-      </Pressable>
+      <Button className="h-12 mt-10 mx-9 bg-[#3165D2]">
+        <ButtonText>确定</ButtonText>
+      </Button>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  model: {
+  form: {
     position: 'relative',
-    padding: 8,
-  },
-  close: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    padding: 12,
-  },
-  title: {
-    textAlign: 'center',
-    fontSize: 16,
-    fontWeight: 500,
-    marginBottom: 20,
+    paddingHorizontal: 16,
   },
   itemBox: {
-    backgroundColor: '#FAFAFA',
     height: 50,
-    borderRadius: 4,
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 12,
     justifyContent: 'space-between',
     gap: 8,
     fontSize: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eeeeee'
   },
-  itemTitle: {},
   itemInput: {
     flex: 1,
     height: '100%',
     textAlign: 'right',
   },
-  btn: {
-    height: 44,
-    borderRadius: 6,
-    color: '#fff',
-    justifyContent: 'center',
-    backgroundColor: '#3165D2',
-    marginTop: 16,
-  },
-  btnText: {
-    color: '#FFF',
-    textAlign: 'center',
-    fontSize: 16,
-  },
 });