283 lines
12 KiB
TypeScript
283 lines
12 KiB
TypeScript
|
import 'react-native-gesture-handler';
|
||
|
|
import * as React from 'react';
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, Modal, Pressable, Share } from 'react-native';
|
||
|
|
import Constants from 'expo-constants';
|
||
|
|
import { Ionicons, FontAwesome } from '@expo/vector-icons';
|
||
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
||
|
|
import { PolicyFooter, Social, ShowroomList, FooterInfo } from '../components/footer/footerMain';
|
||
|
|
|
||
|
|
import EditScreenInfo from '../components/EditScreenInfo';
|
||
|
|
import { Text, View, } from '../components/Themed';
|
||
|
|
import useColorScheme from '../hooks/useColorScheme';
|
||
|
|
import { TextInput } from 'react-native-gesture-handler';
|
||
|
|
import { RadioButton, Checkbox } from 'react-native-paper';
|
||
|
|
import { Picker } from '@react-native-picker/picker';
|
||
|
|
import { ArticleItem } from '../components/article/ArticleItem';
|
||
|
|
|
||
|
|
export default function Register() {
|
||
|
|
const [selectedDay, setSelectedDay] = useState();
|
||
|
|
const [selectedMonth, setSelectedMonth] = useState();
|
||
|
|
const [selectedYear, setSelectedYear] = useState();
|
||
|
|
const [selectedProvince, setSelectedProvince] = useState();
|
||
|
|
const [checked, setChecked] = React.useState('male');
|
||
|
|
return (
|
||
|
|
<SafeAreaView style={styles.container}>
|
||
|
|
<ScrollView>
|
||
|
|
<View style={styles.brecrumb}>
|
||
|
|
<Text style={styles.brecrumbText}>Trang chủ</Text>
|
||
|
|
<FontAwesome style={styles.brecrumbIcon} name="angle-right" />
|
||
|
|
<Text style={styles.brecrumbTextLast}>Đăng ký</Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={styles.boxRegister}>
|
||
|
|
<Text style={styles.boxRegisterTitle}>Đăng ký</Text>
|
||
|
|
<View>
|
||
|
|
<View style={styles.registerItem}>
|
||
|
|
<Text style={styles.registerItemText}>Địa chỉ Email<Text style={styles.registerItemWn}>*</Text></Text>
|
||
|
|
<TextInput style={styles.registerItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerItem}>
|
||
|
|
<Text style={styles.registerItemText}>Tên<Text style={styles.registerItemWn}>*</Text></Text>
|
||
|
|
<TextInput style={styles.registerItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerItem}>
|
||
|
|
<Text style={styles.registerItemText}>Số máy bàn</Text>
|
||
|
|
<TextInput style={styles.registerItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerItem}>
|
||
|
|
<Text style={styles.registerItemText}>Số di động<Text style={styles.registerItemWn}>*</Text></Text>
|
||
|
|
<TextInput style={styles.registerItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerItem}>
|
||
|
|
<Text style={styles.registerItemText}>Giới tính</Text>
|
||
|
|
<View style={styles.registerItemSex}>
|
||
|
|
<View style={styles.registerItemSexItem}>
|
||
|
|
<Text style={styles.registerItemSexText}>Nam</Text>
|
||
|
|
<View style={styles.registerItemSexRadio}>
|
||
|
|
<RadioButton color={'#243a76'} value={'male'} status={checked === 'male' ? 'checked' : 'unchecked'} onPress={() => setChecked('male')} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerItemSexItem}>
|
||
|
|
<Text style={styles.registerItemSexText}>Nữ</Text>
|
||
|
|
<View style={styles.registerItemSexRadio}>
|
||
|
|
<RadioButton color={'#243a76'} value={'female'} status={checked === 'female' ? 'checked' : 'unchecked'} onPress={() => setChecked('female')} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerItem}>
|
||
|
|
<Text style={styles.registerItemText}>Ngày sinh</Text>
|
||
|
|
<View style={styles.registerBirthDay}>
|
||
|
|
<View style={styles.registerBirthDayItem}>
|
||
|
|
<Picker
|
||
|
|
style={styles.picker}
|
||
|
|
itemStyle={styles.onePickerItem}
|
||
|
|
selectedValue={selectedDay}
|
||
|
|
onValueChange={(itemValue, itemIndex) =>
|
||
|
|
setSelectedDay(itemValue)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Picker.Item label="Ngày" value="0" />
|
||
|
|
<Picker.Item label="01" value="1" />
|
||
|
|
<Picker.Item label="02" value="2" />
|
||
|
|
<Picker.Item label="03" value="3" />
|
||
|
|
<Picker.Item label="04" value="4" />
|
||
|
|
</Picker>
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerBirthDayItem}>
|
||
|
|
<Picker
|
||
|
|
style={styles.picker}
|
||
|
|
itemStyle={styles.onePickerItem}
|
||
|
|
selectedValue={selectedMonth}
|
||
|
|
onValueChange={(itemValue, itemIndex) =>
|
||
|
|
setSelectedMonth(itemValue)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Picker.Item label="Tháng" value="0" />
|
||
|
|
<Picker.Item label="01" value="1" />
|
||
|
|
<Picker.Item label="02" value="2" />
|
||
|
|
<Picker.Item label="03" value="3" />
|
||
|
|
<Picker.Item label="04" value="4" />
|
||
|
|
</Picker>
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerBirthDayItem}>
|
||
|
|
<Picker
|
||
|
|
style={styles.picker}
|
||
|
|
itemStyle={styles.onePickerItem}
|
||
|
|
selectedValue={selectedYear}
|
||
|
|
onValueChange={(itemValue, itemIndex) =>
|
||
|
|
setSelectedYear(itemValue)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Picker.Item label="Năm" value="0" />
|
||
|
|
<Picker.Item label="2020" value="2020" />
|
||
|
|
<Picker.Item label="2019" value="2019" />
|
||
|
|
<Picker.Item label="2018" value="2018" />
|
||
|
|
<Picker.Item label="2017" value="2017" />
|
||
|
|
</Picker>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerItem}>
|
||
|
|
<Text style={styles.registerItemText}>Mật khẩu<Text style={styles.registerItemWn}>*</Text></Text>
|
||
|
|
<TextInput style={styles.registerItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerItem}>
|
||
|
|
<Text style={styles.registerItemText}>Nhập lại mật khẩu<Text style={styles.registerItemWn}>*</Text></Text>
|
||
|
|
<TextInput style={styles.registerItemInput} />
|
||
|
|
</View>
|
||
|
|
<View style={styles.registerItem}>
|
||
|
|
<Text style={styles.registerItemText}>Tỉnh/TP</Text>
|
||
|
|
<Picker
|
||
|
|
style={styles.picker}
|
||
|
|
itemStyle={styles.onePickerItem}
|
||
|
|
selectedValue={selectedProvince}
|
||
|
|
onValueChange={(itemValue, itemIndex) =>
|
||
|
|
setSelectedProvince(itemValue)
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Picker.Item label="Hà Nội" value="1" />
|
||
|
|
<Picker.Item label="Đà Nẵng" value="2" />
|
||
|
|
<Picker.Item label="Hải Phòng" value="3" />
|
||
|
|
<Picker.Item label="TP Hồ Chí Minh" value="4" />
|
||
|
|
</Picker>
|
||
|
|
</View>
|
||
|
|
<Pressable style={styles.boxRegisterSubmit}>
|
||
|
|
<Text style={styles.boxRegisterSubmitText}>Đăng ký</Text>
|
||
|
|
</Pressable>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<PolicyFooter />
|
||
|
|
|
||
|
|
<Social />
|
||
|
|
|
||
|
|
<ShowroomList />
|
||
|
|
|
||
|
|
<FooterInfo />
|
||
|
|
</ScrollView>
|
||
|
|
</SafeAreaView>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const winWidth = Dimensions.get('window').width; //full width
|
||
|
|
const winHeight = Dimensions.get('window').height; //full height
|
||
|
|
const winWidthP10 = winWidth - 20;
|
||
|
|
const halfWinWidth = winWidth / 2;
|
||
|
|
const ratio = winWidthP10 / 850; //541 is actual image width
|
||
|
|
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
},
|
||
|
|
brecrumb: {
|
||
|
|
display: 'flex',
|
||
|
|
width: winWidth,
|
||
|
|
paddingLeft: 10,
|
||
|
|
paddingRight: 10,
|
||
|
|
flexDirection: 'row',
|
||
|
|
height: 18,
|
||
|
|
alignItems: 'center',
|
||
|
|
marginTop: 10,
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
brecrumbText: {
|
||
|
|
fontSize: 13,
|
||
|
|
color: '#222',
|
||
|
|
},
|
||
|
|
brecrumbTextLast: {
|
||
|
|
fontSize: 13,
|
||
|
|
color: '#b7b7b7',
|
||
|
|
},
|
||
|
|
brecrumbIcon: {
|
||
|
|
fontSize: 13,
|
||
|
|
color: '#222',
|
||
|
|
marginLeft: 6,
|
||
|
|
marginRight: 6
|
||
|
|
},
|
||
|
|
boxRegister: {
|
||
|
|
width: winWidth,
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
boxRegisterTitle: {
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
marginBottom: 20,
|
||
|
|
},
|
||
|
|
registerItem: {
|
||
|
|
marginBottom: 10,
|
||
|
|
},
|
||
|
|
registerItemText: {
|
||
|
|
fontWeight: 'bold',
|
||
|
|
marginBottom: 5,
|
||
|
|
},
|
||
|
|
registerItemWn: {
|
||
|
|
color: '#ff0000',
|
||
|
|
fontWeight: 'normal'
|
||
|
|
},
|
||
|
|
registerItemInput: {
|
||
|
|
width: '100%',
|
||
|
|
height: 40,
|
||
|
|
borderRadius: 5,
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: '#e1e1e1',
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
},
|
||
|
|
registerItemSex: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
registerItemSexItem: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginRight: 20,
|
||
|
|
},
|
||
|
|
registerItemSexText: {
|
||
|
|
marginRight: 5,
|
||
|
|
},
|
||
|
|
registerItemSexRadio: {
|
||
|
|
width: 36,
|
||
|
|
height: 36,
|
||
|
|
borderColor: '#333',
|
||
|
|
borderWidth: 1,
|
||
|
|
borderRadius: 18,
|
||
|
|
},
|
||
|
|
boxRegisterSubmit: {
|
||
|
|
width: '100%',
|
||
|
|
height: 40,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'center',
|
||
|
|
alignItems: 'center',
|
||
|
|
backgroundColor: 'red',
|
||
|
|
borderRadius: 5,
|
||
|
|
},
|
||
|
|
boxRegisterSubmitText: {
|
||
|
|
color: '#fff',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
registerBirthDay: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'space-between'
|
||
|
|
},
|
||
|
|
registerBirthDayItem: {
|
||
|
|
width: '32%'
|
||
|
|
},
|
||
|
|
picker: {
|
||
|
|
height: 46,
|
||
|
|
width: '100%',
|
||
|
|
},
|
||
|
|
onePickerItem: {
|
||
|
|
height: 46,
|
||
|
|
color: '#222',
|
||
|
|
fontSize: 14,
|
||
|
|
textAlign: 'center',
|
||
|
|
width: '100%',
|
||
|
|
},
|
||
|
|
})
|