Skip to content

I
InvestCustomer
Commit 0789f387 by Giang Tran
Options

update screen newfeed

parent 8ed7c916
Showing with 571 additions and 16 deletions
index.js
...@@ -6,6 +6,4 @@ import {AppRegistry} from 'react-native'; ...@@ -6,6 +6,4 @@ import {AppRegistry} from 'react-native';
import App from './App'; import App from './App';
import {name as appName} from './app.json'; import {name as appName} from './app.json';
import Payment from './src/Screens/Payment/Payment';
AppRegistry.registerComponent(appName, () => App); AppRegistry.registerComponent(appName, () => App);
src/Screens/NewFeed/NewFeed.js 0 → 100644
import React, {Component} from 'react';
import {View, Text, StatusBar, SafeAreaView} from 'react-native';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import Tab1 from './Tab1/Tab1';
import Tab2 from './Tab2/Tab2';
import Tab3 from './Tab3/Tab3';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();
const NewFeed = (props) => {
return (
<View style={{flex: 1}}>
<StatusBar backgroundColor={'#BCD7F8'} />
<SafeAreaView style={{backgroundColor: '#BCD7F8'}} />
<Tab.Navigator
initialRouteName="GeneralInfor"
tabBarOptions={{
inactiveTintColor: '#929292',
activeTintColor: '#1473E6',
labelStyle: {fontSize: getFontXD(36), fontWeight: '700'},
style: {backgroundColor: 'white'},
}}>
<Tab.Screen
name="Tab1"
component={Tab1}
options={{tabBarLabel: 'Chiến lược'}}
/>
<Tab.Screen
name="Tab2"
component={Tab2}
options={{tabBarLabel: 'Tin tức'}}
/>
</Tab.Navigator>
</View>
);
};
export default NewFeed;
src/Screens/NewFeed/Tab1/Tab1.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
TouchableOpacity,
FlatList,
} from 'react-native';
import R from '../../../assets/R';
import {getFontXD} from '../../../Config/Functions';
import Item from './item';
const fillers = [
{
id: '1',
title: 'Ngoại hối',
},
{
id: '2',
title: 'Cổ phiếu',
},
{
id: '3',
title: 'Hàng hoá',
},
{
id: '4',
title: 'Chỉ số',
},
];
const data = [
{
id: '1',
increase: true,
title:
'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
ratio: 'USR/RUB',
time: '45 min ago',
},
{
id: '2',
increase: false,
title:
'USD/AUD Giao dich trong ngày:Xu hướng gỉam lấn áp khi 84,80 là điểm kháng cự.',
content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
ratio: 'USD/AUD',
time: '32 min ago',
},
{
id: '3',
increase: true,
title:
'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
ratio: 'USR/RUB',
time: '2 h ago',
},
{
id: '4',
increase: false,
title:
'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
ratio: 'USR/RUB',
time: '45 min ago',
},
{
id: '5',
increase: true,
title:
'USD/RUB Giao dich trong ngày:khi 74,020 là điểm hỗ trợ,trông chờ 74,860.',
content: 'khi 74,020 là điểm hỗ trợ,trông chờ 74,860',
ratio: 'USR/RUB',
time: '45 min ago',
},
];
const NewFeed = (props) => {
const [selected, setSelected] = useState(1);
return (
<View style={{flex: 1, backgroundColor: 'white'}}>
<View style={styles.fillterView}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
{fillers.map((e) => (
<TouchableOpacity
onPress={() => setSelected(e.id)}
key={e.id}
style={[
styles.item,
e.id == selected ? {backgroundColor: '#BCD7F8'} : {},
]}>
<Text
style={[
styles.txt,
e.id == selected ? {color: '#1C6AF6'} : {},
]}>
{e.title}
</Text>
</TouchableOpacity>
))}
</ScrollView>
</View>
<View style={{flex: 1, paddingHorizontal: 10}}>
<FlatList
showsVerticalScrollIndicator={false}
keyExtractor={(item, index) => item.id}
data={data}
renderItem={({item}) => <Item item={item} />}
/>
</View>
</View>
);
};
export default NewFeed;
const styles = StyleSheet.create({
fillterView: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 10,
},
item: {
backgroundColor: '#EBEBEB',
marginRight: 40,
paddingHorizontal: 10,
paddingVertical: 6,
marginLeft: 20,
},
txt: {
fontSize: getFontXD(42),
color: R.colors.black,
},
});
src/Screens/NewFeed/Tab1/item.js 0 → 100644
import React, {Component} from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';
import Block from '../../../components/Block';
import Icon from 'react-native-vector-icons/AntDesign';
import {getFontXD} from '../../../Config/Functions';
import R from '../../../assets/R';
const Item = (props) => {
const {title, increase, content, ratio, time} = props.item;
return (
<TouchableOpacity
onPress={() => console.log('hello')}
style={styles.container}>
<Text style={styles.txtTitle}>{title}</Text>
<Text>{content}</Text>
<View style={styles.row}>
<Block row center>
<View
style={[styles.wrap, increase ? {backgroundColor: '#03A021'} : {}]}>
<Icon name={'arrowup'} color={'white'} />
<Text style={{color: 'white'}}>Giao dich trong ngay</Text>
</View>
<View
style={[styles.wrap2, increase ? {borderColor: '#03A021'} : {}]}>
<Text>{ratio}</Text>
</View>
</Block>
<Text style={{color: '#929292'}}>{time}</Text>
</View>
<Image
source={R.images.tradding}
resizeMode={'contain'}
style={styles.img}
/>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {
marginVertical: 10,
},
row: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginVertical: 10,
},
wrap: {
backgroundColor: '#D62936',
alignItems: 'center',
flexDirection: 'row',
marginRight: 10,
padding: 5,
borderRadius: 10,
},
wrap2: {
padding: 3,
borderWidth: 1,
borderColor: '#D62936',
alignItems: 'center',
borderRadius: 2,
},
txtTitle: {
fontSize: getFontXD(46),
color: 'black',
fontWeight: 'bold',
},
img: {
width: '100%',
height: 280,
},
});
export default Item;
src/Screens/NewFeed/Tab2/Tab2.js 0 → 100644
import React, {Component} from 'react';
import {View, Text, FlatList} from 'react-native';
import Item from './item';
const data = [
{
id: '1',
title:
'Vương quốc 1 anh niềm tin tiêu dùng do Gfk công bố đạt -16,vượt mức dự đoán (-20) trong tháng ba',
time: '07:06',
date: '19 Mar 2021',
},
{
id: '2',
title:
'Vương quốc 2 anh niềm tin tiêu dùng do Gfk công bố đạt -16,vượt mức dự đoán (-20) trong tháng ba',
time: '07:06',
date: '19 Mar 2021',
},
{
id: '3',
title:
'Vương quốc 3 anh niềm tin tiêu dùng do Gfk công bố đạt -16,vượt mức dự đoán (-20) trong tháng ba',
time: '07:06',
date: '19 Mar 2021',
},
{
id: '4',
title:
'Vương quốc 4 anh niềm tin tiêu dùng do Gfk công bố đạt -16,vượt mức dự đoán (-20) trong tháng ba',
time: '07:06',
date: '19 Mar 2021',
},
{
id: '5',
title:
'Vương quốc 5 anh niềm tin tiêu dùng do Gfk công bố đạt -16,vượt mức dự đoán (-20) trong tháng ba',
time: '07:06',
date: '19 Mar 2021',
},
{
id: '6',
title:
'Vương quốc 6 anh niềm tin tiêu dùng do Gfk công bố đạt -16,vượt mức dự đoán (-20) trong tháng ba',
time: '07:06',
date: '19 Mar 2021',
},
{
id: '7',
title:
'Vương quốc 7 anh niềm tin tiêu dùng do Gfk công bố đạt -16,vượt mức dự đoán (-20) trong tháng ba',
time: '07:06',
date: '19 Mar 2021',
},
{
id: '8',
title:
'Vương quốc 8 anh niềm tin tiêu dùng do Gfk công bố đạt -16,vượt mức dự đoán (-20) trong tháng ba',
time: '07:06',
date: '19 Mar 2021',
},
{
id: '9',
title:
'Vương quốc 9 anh niềm tin tiêu dùng do Gfk công bố đạt -16,vượt mức dự đoán (-20) trong tháng ba',
time: '07:06',
date: '19 Mar 2021',
},
{
id: '10',
title:
'Vương quốc 10 anh niềm tin tiêu dùng do Gfk công bố đạt -16,vượt mức dự đoán (-20) trong tháng ba',
time: '07:06',
date: '19 Mar 2021',
},
];
const NewFeed = (props) => {
return (
<View
style={{
flex: 1,
backgroundColor: 'white',
paddingLeft: 10,
paddingRight: 20,
paddingTop: 10,
}}>
<FlatList
data={data}
showsVerticalScrollIndicator={false}
keyExtractor={(item) => item.id}
renderItem={({item, index}) => <Item item={item} index={index} />}
/>
</View>
);
};
export default NewFeed;
src/Screens/NewFeed/Tab2/item.js 0 → 100644
import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import R from '../../../assets/R';
import Block from '../../../components/Block';
import {getFontXD} from '../../../Config/Functions';
const Item = (props) => {
const {title, date, time} = props.item;
return (
<TouchableOpacity
onPress={() => console.log('hello')}
style={styles.container}>
<View style={styles.left}>
<View style={styles.dot} />
</View>
<View style={[styles.right, props.index == 0 ? {borderTopWidth: 0} : {}]}>
<View style={styles.row}>
<Text style={styles.txtTime}>{time}</Text>
<Text style={styles.txtDate}>{date}</Text>
</View>
<Text style={styles.txtTitle}>
{title}+{props.index}
</Text>
</View>
</TouchableOpacity>
);
};
export default Item;
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
marginLeft: 10,
},
left: {
width: 0.6,
backgroundColor: '#CECECE',
},
right: {
marginLeft: 20,
paddingVertical: 20,
borderTopWidth: 0.6,
borderBottomWidth: 0.6,
borderColor: '#CECECE',
flex: 1,
},
row: {
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 5,
},
dot: {
width: 10,
height: 10,
backgroundColor: R.colors.main,
borderRadius: 5,
marginLeft: -5,
marginTop: 25,
},
txtTitle: {
fontSize: getFontXD(42),
},
txtTime: {
fontSize: getFontXD(42),
color: R.colors.main,
},
txtDate: {
color: '#929292',
},
});
src/Screens/NewFeed/Tab3/Tab3.js 0 → 100644
import React, {Component} from 'react';
import {View, Text} from 'react-native';
const NewFeed = (props) => {
return (
<View>
<Text>New feed 3</Text>
</View>
);
};
export default NewFeed;
src/Screens/Notification/NotificaitonView.js
import React from 'react'; import React from 'react';
import {View, Text, FlatList} from 'react-native'; import {View, Text, FlatList} from 'react-native';
import HeaderSearch from '../../components/Header/HeaderSearch'; import HeaderBack from '../../components/Header/HeaderBack';
import Item from './Item'; import Item from './Item';
const data = [ const data = [
...@@ -30,7 +30,7 @@ const data = [ ...@@ -30,7 +30,7 @@ const data = [
const NotificaitonView = (props) => { const NotificaitonView = (props) => {
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<HeaderSearch isWhite={false} title={'Thông báo'} /> <HeaderBack isWhite={false} title={'Thông báo'} />
<FlatList <FlatList
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
......
src/assets/images.js
...@@ -52,6 +52,9 @@ const images = { ...@@ -52,6 +52,9 @@ const images = {
iconBitcoin: require('./images/iconBitcoin.png'), iconBitcoin: require('./images/iconBitcoin.png'),
iconSticpay: require('./images/iconSticpay.png'), iconSticpay: require('./images/iconSticpay.png'),
iconTether: require('./images/iconTether.png'), iconTether: require('./images/iconTether.png'),
tradding: require('./images/tradding.png'),
noti: require('./images/noti1.png'),
}; };
export default images; export default images;
src/assets/images/moneyteam.png
src/assets/images/moneyteam.png

4.48 KB | W: | H:

src/assets/images/moneyteam.png

61.3 KB | W: | H:

src/assets/images/moneyteam.png
src/assets/images/moneyteam.png
src/assets/images/moneyteam.png
src/assets/images/moneyteam.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Header/Drawer.js
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
SERVICECUSTOMER, SERVICECUSTOMER,
FEEDBACK, FEEDBACK,
SETTING, SETTING,
NOTIFICATION,
} from '../../routers/ScreenNames'; } from '../../routers/ScreenNames';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
...@@ -21,24 +22,30 @@ const menus = [ ...@@ -21,24 +22,30 @@ const menus = [
}, },
{ {
id: '2', id: '2',
title: 'Thông báo',
icon: R.images.noti,
screen: NOTIFICATION,
},
{
id: '3',
title: 'Cài đặt phương thức thanh toán', title: 'Cài đặt phương thức thanh toán',
icon: R.images.iconMethodPay, icon: R.images.iconMethodPay,
screen: METHODPAY, screen: METHODPAY,
}, },
{ {
id: '3', id: '4',
title: 'Liên hệ với dịch vụ khách hàng', title: 'Liên hệ với dịch vụ khách hàng',
icon: R.images.iconPhone, icon: R.images.iconPhone,
screen: SERVICECUSTOMER, screen: SERVICECUSTOMER,
}, },
{ {
id: '4', id: '5',
title: 'Phản hồi', title: 'Phản hồi',
icon: R.images.iconMess, icon: R.images.iconMess,
screen: FEEDBACK, screen: FEEDBACK,
}, },
{ {
id: '5', id: '6',
title: 'Cài đặt', title: 'Cài đặt',
icon: R.images.iconSetting, icon: R.images.iconSetting,
screen: SETTING, screen: SETTING,
......
src/components/Header/HeaderNewFeed.js 0 → 100644
import React, {useState} from 'react';
import {
View,
Text,
Image,
StatusBar,
StyleSheet,
SafeAreaView,
ImageBackground,
TouchableOpacity,
Platform,
Button,
TouchableWithoutFeedback,
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
import {HEIGHTXD} from '../../Config/Functions';
import Modal from 'react-native-modal';
import Drawer from './Drawer';
const HeaderHome = (props) => {
const [isModalVisible, setModalVisible] = useState(false);
const toggleModal = () => {
setModalVisible(!isModalVisible);
};
return (
<ImageBackground style={styles.img} source={R.images.bgHeader}>
<StatusBar backgroundColor="transparent" translucent={true} />
<View style={styles.headerContainer}>
<TouchableOpacity onPress={toggleModal}>
<Image source={R.images.iconMenu} style={styles.imgIcon} />
</TouchableOpacity>
<Text style={styles.txtTitle}>Tài khoản</Text>
<View />
</View>
<Modal
animationIn={'fadeInLeft'}
animationOut={'fadeOutLeft'}
style={{marginLeft: 20}}
isVisible={isModalVisible}
backdropOpacity={0.5}>
<View
style={[
{flex: 1, flexDirection: 'row'},
Platform.OS == 'ios' ? {paddingVertical: 15} : {},
]}>
<View style={styles.container}>
<Drawer toggleModal={toggleModal} />
</View>
<TouchableWithoutFeedback onPress={toggleModal}>
<View
style={{
flex: 1,
}}></View>
</TouchableWithoutFeedback>
</View>
</Modal>
</ImageBackground>
);
};
const mapStateToProps = (state) => {
return {
user: state.userReducer,
};
};
export default connect(mapStateToProps, {})(HeaderHome);
const styles = StyleSheet.create({
img: {
height: 110,
width: '100%',
justifyContent: 'center',
alignItems: 'center',
},
headerContainer: {
height: 55,
width: '100%',
alignItems: 'center',
flexDirection: 'row',
paddingHorizontal: 20,
justifyContent: 'space-between',
},
imgIcon: {
width: 25,
height: 20,
},
txtTitle: {
fontSize: getFontXD(52),
color: R.colors.white,
fontWeight: 'bold',
},
container: {
backgroundColor: 'white',
height: '100%',
width: 300,
borderRadius: 20,
},
});
src/routers/ScreenNames.js
...@@ -44,3 +44,6 @@ export const CHOOSEMETHOD = 'CHOOSEMETHOD'; ...@@ -44,3 +44,6 @@ export const CHOOSEMETHOD = 'CHOOSEMETHOD';
export const NEWPASSWORD = 'NEWPASSWORD'; export const NEWPASSWORD = 'NEWPASSWORD';
export const CONFIRMEMAIL = 'CONFIRMEMAIL'; export const CONFIRMEMAIL = 'CONFIRMEMAIL';
export const NEWFEED = 'NEWFEED';
export const NOTIFICATION = 'NOTIFICATION';
src/routers/StackNavigation.js
...@@ -29,6 +29,7 @@ import ChooseMethod from '../Screens/Action/Deposit/ChooseMethod'; ...@@ -29,6 +29,7 @@ import ChooseMethod from '../Screens/Action/Deposit/ChooseMethod';
import NewPassWord from '../Screens/Authen/NewPassWord'; import NewPassWord from '../Screens/Authen/NewPassWord';
import ConfirmEmail from '../Screens/Authen/ConfirmEmail'; import ConfirmEmail from '../Screens/Authen/ConfirmEmail';
import Notification from '../Screens/Notification/Notification';
import * as ScreenName from './ScreenNames'; import * as ScreenName from './ScreenNames';
...@@ -41,8 +42,9 @@ function MyStack(props) { ...@@ -41,8 +42,9 @@ function MyStack(props) {
headerStatusBarHeight: 0, headerStatusBarHeight: 0,
}} }}
headerMode={'none'} headerMode={'none'}
initialRouteName={ScreenName.AUTHEN}> initialRouteName={ScreenName.TABNAVIGATOR}>
<Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} /> <Stack.Screen name={ScreenName.LOGINSCREEN} component={Login} />
<Stack.Screen name={ScreenName.NOTIFICATION} component={Notification} />
<Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} /> <Stack.Screen name={ScreenName.TABNAVIGATOR} component={TabNavigator} />
<Stack.Screen <Stack.Screen
name={ScreenName.AccountVerification} name={ScreenName.AccountVerification}
...@@ -53,6 +55,7 @@ function MyStack(props) { ...@@ -53,6 +55,7 @@ function MyStack(props) {
<Stack.Screen name={ScreenName.FEEDBACK} component={Feedback} /> <Stack.Screen name={ScreenName.FEEDBACK} component={Feedback} />
<Stack.Screen name={ScreenName.AUTHEN} component={Authen} /> <Stack.Screen name={ScreenName.AUTHEN} component={Authen} />
<Stack.Screen name={ScreenName.METHODPAY} component={MethodPay} /> <Stack.Screen name={ScreenName.METHODPAY} component={MethodPay} />
<Stack.Screen <Stack.Screen
name={ScreenName.SERVICECUSTOMER} name={ScreenName.SERVICECUSTOMER}
component={ServiceCustomer} component={ServiceCustomer}
......
src/routers/TabNavigation.js
...@@ -2,7 +2,8 @@ import React, {useEffect} from 'react'; ...@@ -2,7 +2,8 @@ import React, {useEffect} from 'react';
import {View, Text} from 'react-native'; import {View, Text} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome5'; import Icon from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import Ionicons from 'react-native-vector-icons/Ionicons';
import Home from '../Screens/Home/Home'; import Home from '../Screens/Home/Home';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import R from '../assets/R'; import R from '../assets/R';
...@@ -10,6 +11,7 @@ import PlussModal from './PlussModal'; ...@@ -10,6 +11,7 @@ import PlussModal from './PlussModal';
import Notification from '../Screens/Notification/Notification'; import Notification from '../Screens/Notification/Notification';
import Account from '../Screens/Account/Account'; import Account from '../Screens/Account/Account';
import Exchange from '../Screens/Exchange/Exchange'; import Exchange from '../Screens/Exchange/Exchange';
import NewFeed from '../Screens/NewFeed/NewFeed';
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
...@@ -65,15 +67,11 @@ const TabNavigator = (props) => { ...@@ -65,15 +67,11 @@ const TabNavigator = (props) => {
/> />
<Tab.Screen <Tab.Screen
name="Screen4" name="Screen4"
component={Notification} component={NewFeed}
options={{ options={{
tabBarLabel: 'Thông báo', tabBarLabel: 'Thông tin',
tabBarIcon: ({color, size}) => ( tabBarIcon: ({color, size}) => (
<MaterialIcons <Ionicons name="newspaper-outline" size={size} color={color} />
name="notifications-on"
size={size}
color={color}
/>
), ),
}} }}
/> />
......
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