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

add register, account, article, update navigation

Browse Source
This commit is contained in:
ducht
2021-04-13 17:17:14 +07:00
parent b296e442a6
commit c5efa8e6d4
12 changed files with 3337 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
screens/Register.tsx Normal file
View File

@@ -0,0 +1,209 @@
import * as React from 'react';
import { useState } from 'react';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity, ImageBackground, Modal, Pressable } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons, FontAwesome } from '@expo/vector-icons';
import EditScreenInfo from '../components/EditScreenInfo';
import { Text, View } from '../components/Themed';
import { TextInput } from 'react-native-gesture-handler';
import { useNavigation } from '@react-navigation/native';
import { Checkbox } from 'react-native-paper';
export default function Register() {
const [checkedRegis, setCheckedRegis] = useState(false);
const navigation = useNavigation();
return (
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.boxRegister}>
<Text style={styles.boxRegisterTitle}>Tạo tài khoản Nagakawa</Text>
<View style={styles.boxRegisterNote}>
<Text>Bạn đã có tài khoản? </Text>
<TouchableOpacity onPress={() => navigation.navigate('Login')}>
<Text style={styles.green}>Đăng nhập</Text>
</TouchableOpacity>
<Text> tại đây</Text>
</View>
<View style={styles.boxRegisterList}>
<View style={styles.boxRegisterItem}>
<Text style={styles.boxRegisterItemText}>Số điện thoại*</Text>
<TextInput style={styles.boxRegisterItemInput} />
</View>
<View style={styles.boxRegisterItem}>
<Text style={styles.boxRegisterItemText}>Email đăng ký*</Text>
<TextInput style={styles.boxRegisterItemInput} />
</View>
<View style={styles.boxRegisterItem}>
<Text style={styles.boxRegisterItemText}>Địa chỉ*</Text>
<TextInput style={styles.boxRegisterItemInput} />
</View>
<View style={styles.boxRegisterItem}>
<Text style={styles.boxRegisterItemText}>Mật khẩu*</Text>
<TextInput style={styles.boxRegisterItemInput} />
</View>
<View style={styles.boxRegisterItem}>
<Text style={styles.boxRegisterItemText}>Nhập lại mật khẩu*</Text>
<TextInput style={styles.boxRegisterItemInput} />
</View>
<View style={styles.boxRegisterItem}>
<Text style={styles.boxRegisterItemText}>Họ tên*</Text>
<TextInput style={styles.boxRegisterItemInput} />
</View>
<View style={styles.boxRegisterItem}>
<Text style={styles.boxRegisterItemText}>Mã xác nhận</Text>
<View style={styles.boxRegisterCapcha}>
<Image source={require('../assets/images/captcha.png')} />
<TouchableOpacity>
<Text style={styles.boxRegisterCapchaOther}>[ Xem mã khác ]</Text>
</TouchableOpacity>
</View>
<TextInput style={styles.boxRegisterItemInput} />
</View>
<View style={styles.checkKmRegis}>
<View style={styles.checkKmRegisCheck}>
<Checkbox status={checkedRegis ? 'checked' : 'unchecked'} onPress={() => setCheckedRegis(!checkedRegis)} />
</View>
<Text style={styles.checkKmRegisText}>Tôi muốn nhận các thông tin khuyến mãi từ Nagakawa</Text>
</View>
<TouchableOpacity style={styles.boxLoginSubmit}>
<Text style={styles.boxLoginSubmitText}>Đăng ký</Text>
</TouchableOpacity>
<View style={styles.boxLoginOther}>
<Text style={styles.boxLoginOtherText}>Hoặc đăng nhập bằng</Text>
</View>
<View style={styles.boxLoginSocial}>
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialFace]}>
<FontAwesome style={styles.boxLoginSocialIcon} name="facebook" />
</TouchableOpacity>
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialGoogle]}>
<FontAwesome style={styles.boxLoginSocialIcon} name="google" />
</TouchableOpacity>
<TouchableOpacity style={[styles.boxLoginSocialItem, styles.boxLoginSocialZalo]}>
<Image style={styles.boxLoginSocialImg} source={require('../assets/images/icon-zalo.png')} />
</TouchableOpacity>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
const winWidth = Dimensions.get('window').width; //full width
const winHeight = Dimensions.get('window').height; //full height
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
boxRegister: {
width: winWidth,
padding: 10,
backgroundColor: 'rgba(0,0,0,0)',
},
boxRegisterTitle: {
marginBottom: 15,
fontSize: 18,
fontWeight: 'bold',
},
boxRegisterNote: {
marginBottom: 10,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0)'
},
green: {
color: '#008445',
},
boxRegisterList: {
width: '100%',
padding: 10,
},
boxRegisterItem: {
width: '100%',
marginBottom: 10,
},
boxRegisterItemText: {
fontWeight: 'bold',
marginBottom: 5,
},
boxRegisterItemInput: {
width: '100%',
height: 40,
borderColor: '#e1e1e1',
borderWidth: 1,
borderRadius: 5,
},
boxRegisterCapcha: {
flexDirection: 'row',
alignItems: 'center',
},
boxRegisterCapchaOther: {},
checkKmRegis: {
flexDirection: 'row',
marginBottom: 10,
marginTop: 10,
},
checkKmRegisCheck: {
width: 36,
height: 36,
borderWidth: 1,
borderColor: '#e1e1e1',
marginRight: 10,
},
checkKmRegisText: {},
boxLoginSubmit: {
width: '100%',
height: 40,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 5,
overflow: 'hidden',
backgroundColor: '#d9282f',
marginBottom: 20,
},
boxLoginSubmitText: {
fontWeight: 'bold',
color: '#fff'
},
boxLoginOther: {
marginBottom: 20,
flexDirection: 'row',
justifyContent: 'center',
},
boxLoginOtherText: {},
boxLoginSocial: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
boxLoginSocialItem: {
width: 34,
height: 34,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 5,
marginHorizontal: 5,
backgroundColor: '#3b5998',
},
boxLoginSocialFace: {},
boxLoginSocialGoogle: {
backgroundColor: '#df4a32',
},
boxLoginSocialZalo: {
backgroundColor: '#0f8edd',
},
boxLoginSocialIcon: {
fontSize: 16,
color: '#fff',
},
boxLoginSocialImg: {
width: 16,
height: 16,
},
});