廓形仪rn版本-技术调研
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

103 lines
3.5 KiB

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 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>
<Button className="h-12 mt-10 mx-9 bg-[#3165D2]">
<ButtonText></ButtonText>
</Button>
</View>
);
}
const styles = StyleSheet.create({
form: {
position: 'relative',
paddingHorizontal: 16,
},
itemBox: {
height: 50,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
gap: 8,
fontSize: 14,
borderBottomWidth: 1,
borderBottomColor: '#eeeeee'
},
itemInput: {
flex: 1,
height: '100%',
textAlign: 'right',
},
});