ducht/Hanoicomputer_App
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

them chi tiet tin tuc, dang ky, dang nhap, gioi thieu, lien he, build pc

Browse Source
This commit is contained in:
ducht
2021-03-18 17:51:32 +07:00
parent d335721278
commit e8a10383f5
9 changed files with 2393 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
screens/Register.tsx Normal file
View File

@@ -0,0 +1,283 @@
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%',
},
})