Skip to content

I
InvestCustomer
Commit 6bfd7025 by Giang Tran
Options

screen payment

parent 34afef31
Showing with 291 additions and 71 deletions
App.js
......@@ -6,6 +6,7 @@ import rootReducer from './src/Reducers/index';
import RootView from './src/RootView';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './src/Saga/rootSaga';
import {SafeAreaProvider} from 'react-native-safe-area-context';
const sagaMiddleware = createSagaMiddleware();
......@@ -13,9 +14,11 @@ let store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);
const App = () => {
return (
<Provider store={store}>
<RootView />
</Provider>
<SafeAreaProvider>
<Provider store={store}>
<RootView />
</Provider>
</SafeAreaProvider>
);
};
......
android/app/src/main/AndroidManifest.xml
......@@ -11,8 +11,9 @@
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:usesCleartextTraffic="true"
android:theme="@style/AppTheme">
android:theme="@style/AppTheme"
android:usesCleartextTraffic="true"
>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
......
src/Screens/AccountVerification/AccountVerificationView.js
import React from 'react';
import {View, Text} from 'react-native';
import {
View,
Text,
KeyboardAvoidingView,
ScrollView,
Platform,
} from 'react-native';
import HeaderBack from '../../components/Header/HeaderBack';
import BankInfor from './Tab/BankInfor';
import GeneralInfor from './Tab/GeneralInfor';
......@@ -10,34 +16,41 @@ const Tab = createMaterialTopTabNavigator();
const AccountVerificationView = (props) => {
return (
<View style={{flex: 1}}>
<HeaderBack isWhite={true} title={'Xác minh tài khoản'} />
<Tab.Navigator
initialRouteName="GeneralInfor"
tabBarOptions={{
inactiveTintColor: '#929292',
activeTintColor: '#1473E6',
labelStyle: {fontSize: getFontXD(36)},
style: {backgroundColor: 'white'},
scrollEnabled: true,
}}>
<Tab.Screen
name="GeneralInfor"
component={GeneralInfor}
options={{tabBarLabel: 'Thông tin chung'}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{tabBarLabel: 'Hồ sơ'}}
/>
<Tab.Screen
name="BankInfor"
component={BankInfor}
options={{tabBarLabel: 'Ngân hàng'}}
/>
</Tab.Navigator>
</View>
<KeyboardAvoidingView
behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
style={{flex: 1}}
keyboardVerticalOffset={-50}>
<ScrollView showsVerticalScrollIndicator={false}>
<View style={{flex: 1}}>
<HeaderBack isWhite={true} title={'Xác minh tài khoản'} />
<Tab.Navigator
initialRouteName="GeneralInfor"
tabBarOptions={{
inactiveTintColor: '#929292',
activeTintColor: '#1473E6',
labelStyle: {fontSize: getFontXD(36)},
style: {backgroundColor: 'white'},
scrollEnabled: true,
}}>
<Tab.Screen
name="GeneralInfor"
component={GeneralInfor}
options={{tabBarLabel: 'Thông tin chung'}}
/>
<Tab.Screen
name="Profile"
component={Profile}
options={{tabBarLabel: 'Hồ sơ'}}
/>
<Tab.Screen
name="BankInfor"
component={BankInfor}
options={{tabBarLabel: 'Ngân hàng'}}
/>
</Tab.Navigator>
</View>
</ScrollView>
</KeyboardAvoidingView>
);
};
......
src/Screens/AccountVerification/Tab/GeneralInfor.js
......@@ -28,6 +28,7 @@ const GeneralInfor = (props) => {
/>
<TextMulti title={'Địa chỉ'} />
<View style={{height: 100}} />
</View>
);
};
......
src/Screens/Authen/Authen.js
import React from 'react';
import {View, Text} from 'react-native';
import {
View,
Text,
KeyboardAvoidingView,
Platform,
SafeAreaView,
StatusBar,
} from 'react-native';
import HeaderAuthen from '../../components/Header/HeaderAuthen';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import {getFontXD} from '../../Config/Functions';
import Login from './Login';
import Registor from './Registor';
import {ScrollView} from 'react-native-gesture-handler';
const Tab = createMaterialTopTabNavigator();
const Authen = (props) => {
return (
<View style={{flex: 1}}>
<HeaderAuthen />
<View style={{flex: 1, backgroundColor: 'white'}}>
<Tab.Navigator
initialRouteName="Login"
tabBarOptions={{
activeTintColor: '#0045C8',
labelStyle: {fontSize: getFontXD(42), fontWeight: '700'},
style: {
justifyContent: 'center',
marginHorizontal: 40,
elevation: 0,
},
}}>
<Tab.Screen
name="LOGIN"
component={Login}
options={{tabBarLabel: 'Đăng nhập'}}
/>
<Tab.Screen
name="REGISTOR"
component={Registor}
options={{tabBarLabel: 'Đăng ký'}}
/>
</Tab.Navigator>
</View>
</View>
<KeyboardAvoidingView
behavior={Platform.Os === 'ios' ? 'padding' : 'height'}
style={{flex: 1, backgroundColor: 'white'}}
keyboardVerticalOffset={-50}>
<ScrollView showsVerticalScrollIndicator={false}>
<View style={{flex: 1}}>
<HeaderAuthen />
<View style={{flex: 1, backgroundColor: 'white'}}>
<Tab.Navigator
initialRouteName="Login"
tabBarOptions={{
activeTintColor: '#0045C8',
labelStyle: {fontSize: getFontXD(42), fontWeight: '700'},
style: {
justifyContent: 'center',
marginHorizontal: 40,
elevation: 0,
},
}}>
<Tab.Screen
name="LOGIN"
component={Login}
options={{tabBarLabel: 'Đăng nhập'}}
/>
<Tab.Screen
name="REGISTOR"
component={Registor}
options={{tabBarLabel: 'Đăng ký'}}
/>
</Tab.Navigator>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
);
};
......
src/Screens/Authen/Login.js
import React from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity,
KeyboardAvoidingView,
Platform,
} from 'react-native';
import InputIcon from '../../components/Input/InputIcon';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import {useNavigation} from '@react-navigation/native';
import {TABNAVIGATOR, FORGOTPASSWORD} from '../../routers/ScreenNames';
const Login = (props) => {
const {navigation} = props;
......@@ -61,6 +70,7 @@ const Login = (props) => {
</TouchableOpacity>
</View>
</View>
<View style={{height: 100}} />
</View>
);
};
......
src/Screens/MethodPay/Item.js 0 → 100644
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
import {getFontXD, HEIGHTXD, WIDTHXD, toPriceVnd} from '../../Config/Functions';
import R from '../../assets/R';
import Block from '../../components/Block';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
const Item = (props) => {
const {item} = props;
return (
<TouchableOpacity onPress={() => console.log('HEllo')}>
<View style={styles.container}>
<Block flex={1} row center padding={[10, 10]}>
<Image source={item.image} style={styles.imgIcon} />
<Block padding={[0, 10]}>
<Text style={styles.txtBig}>{item.title}</Text>
<Block space={'between'} margin={[10, 0, 0, 0]} row flex={1}>
<Block>
<Text style={styles.txtLeft}>Tien nap toi thieu</Text>
<Text style={styles.txtLeft}>Hoa hong</Text>
<Text style={styles.txtLeft}>Thoi gian</Text>
</Block>
<Block>
<Text style={styles.txtRight}>{item.minPay} USD</Text>
<Text style={styles.txtRight}>{item.rose} USD</Text>
<Text style={styles.txtRight}>{item.time}</Text>
</Block>
</Block>
</Block>
</Block>
</View>
</TouchableOpacity>
);
};
export default React.memo(Item);
const styles = StyleSheet.create({
container: {
marginTop: 10,
height: HEIGHTXD(320),
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
marginHorizontal: 10,
backgroundColor: R.colors.white,
marginBottom: 10,
borderRadius: HEIGHTXD(30),
},
wrapLeft: {
width: WIDTHXD(16),
borderTopLeftRadius: HEIGHTXD(30),
borderBottomStartRadius: HEIGHTXD(30),
},
wrapDate: {
justifyContent: 'center',
paddingHorizontal: 10,
},
txtTitle: {
fontSize: getFontXD(42),
color: R.colors.black,
fontWeight: 'bold',
},
txt: {
fontSize: getFontXD(39),
color: '#929292',
fontStyle: 'italic',
},
rowBet: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
txtBlack: {
fontSize: getFontXD(42),
color: 'black',
},
imgIcon: {
width: WIDTHXD(220),
height: HEIGHTXD(220),
resizeMode: 'contain',
},
txtLeft: {
fontSize: getFontXD(36),
color: '#929292',
marginBottom: 5,
},
txtBig: {
fontSize: getFontXD(42),
color: '#00359C',
},
txtRight: {
fontSize: getFontXD(36),
fontWeight: 'bold',
marginBottom: 5,
},
});
src/Screens/MethodPay/MethodPayView.js
import React from 'react';
import {View, Text} from 'react-native';
import {View, Text, StyleSheet, FlatList} from 'react-native';
import R from '../../assets/R';
import HeaderBack from '../../components/Header/HeaderBack';
import Item from './Item';
const data = [
{
image: R.images.iconNganLuong,
title: 'Ngân lượng',
rose: 0,
time: 'Tức thời',
minPay: 5,
id: '1',
},
{
image: R.images.iconVisa,
title: 'Visa bank',
rose: 0,
time: 'Tức thời',
minPay: 1,
id: '2',
},
{
image: R.images.iconInternet,
title: 'Internet banking',
rose: 0,
time: 'Tức thời',
minPay: 5,
id: '3',
},
{
image: R.images.iconBitcoin,
title: 'Bitcoin',
rose: 0,
time: 'Tức thời',
minPay: 2,
id: '4',
},
{
image: R.images.iconSticpay,
title: 'Sticpay',
rose: 0,
time: 'Tức thời',
minPay: 1,
id: '5',
},
{
image: R.images.iconTether,
title: 'Tether',
rose: 0,
time: 'Tức thời',
minPay: 10,
id: '6',
},
];
const MethodPayView = (props) => {
return (
<View>
<Text>MethodPayView screen</Text>
<View style={{flex: 1}}>
<HeaderBack title={'Cài đặt phương thức thanh toán'} />
<View style={{flex: 1}}>
<FlatList
keyExtractor={(item) => item.id}
showsVerticalScrollIndicator={false}
data={data}
renderItem={({item}) => <Item item={item} />}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({});
export default MethodPayView;
src/assets/images.js
......@@ -42,6 +42,13 @@ const images = {
iconEmail: require('./images/iconEmail1.png'),
iconUser3: require('./images/iconUser3.png'),
iconRight1: require('./images/iconRight1.png'),
iconNganLuong: require('./images/iconNganLuong.png'),
iconVisa: require('./images/iconVisa.png'),
iconInternet: require('./images/iconInternet.png'),
iconBitcoin: require('./images/iconBitcoin.png'),
iconSticpay: require('./images/iconSticpay.png'),
iconTether: require('./images/iconTether.png'),
};
export default images;
src/components/Header/HeaderAuthen.js
......@@ -41,9 +41,8 @@ export default connect(mapStateToProps, {})(HeaderAuthen);
const styles = StyleSheet.create({
img: {
height: Platform.OS == 'ios' ? HEIGHTXD(750) : HEIGHTXD(920),
height: 260,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
......
src/components/Input/InputComponent.js
......@@ -30,4 +30,4 @@ const InputComponent = (props) => {
);
};
export default InputComponent;
export default React.memo(InputComponent);
src/routers/StackNavigation.js
......@@ -31,7 +31,12 @@ const Stack = createStackNavigator();
function MyStack(props) {
return (
<Stack.Navigator headerMode={'none'} initialRouteName={ScreenName.AUTHEN}>
<Stack.Navigator
screenOptions={{
headerStatusBarHeight: 0,
}}
headerMode={'none'}
initialRouteName={ScreenName.AUTHEN}>
<Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
<Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
<Stack.Screen
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment