edited
This commit is contained in:
347
app/navigation/index.js
Executable file
347
app/navigation/index.js
Executable file
@@ -0,0 +1,347 @@
|
||||
import React from "react";
|
||||
import { StyleSheet, Image, Text, View } from "react-native";
|
||||
|
||||
import {
|
||||
TabNavigator,
|
||||
StackNavigator,
|
||||
DrawerNavigator,
|
||||
TabBarBottom
|
||||
} from "react-navigation";
|
||||
import Size from "../config/size";
|
||||
import Icon from "react-native-vector-icons/dist/Ionicons";
|
||||
import init from "../containers/Menu/init";
|
||||
import Tutorial from "../containers/Tutorial/tutorial"
|
||||
import menu from "../containers/Menu/menu";
|
||||
import language from "../containers/Settings/language"
|
||||
import account from "../containers/Account/account";
|
||||
import settings from "../containers/Settings/settings";
|
||||
import myCoupons from "../containers/Settings/myCoupons"
|
||||
import SettingInside from "../containers/Settings/settingInside"
|
||||
import NotificationSetting from "../containers/Settings/notificationSetting";
|
||||
import myOrders from "../containers/MyOrders/myOrders";
|
||||
import OrderDetails from "../containers/MyOrders/orderDetails";
|
||||
import Locations from "../containers/Location/location";
|
||||
import LocationRequest from "../containers/Location//locationRequest";
|
||||
import ConfirmOrder from "../containers/MyOrders/confirmOrder";
|
||||
import Login from "../containers/Login/login";
|
||||
import AddCard from "../containers/Account/addCard";
|
||||
import SideMenu from "./sideMenu";
|
||||
import pay from "../containers/Pay/pay";
|
||||
import SignUpInformation from "../containers/signUp/signUpInformation";
|
||||
import SignUpVerify from "../containers/signUp/signUpVerify";
|
||||
import ForgetPassword from '../containers/signUp/forgetPassword'
|
||||
import { Provider } from "mobx-react";
|
||||
import FastImage from "react-native-fast-image";
|
||||
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||||
import store from "../stores/stores_index";
|
||||
import theme from "../config/colors"
|
||||
import Global from '../Global'
|
||||
import {Fonts} from '../config/fonts'
|
||||
|
||||
const size = new Size();
|
||||
|
||||
const Navigation = () => {
|
||||
return (
|
||||
<Provider {...store}>
|
||||
<Navigator />
|
||||
</Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const settingStack = StackNavigator({
|
||||
settings:{
|
||||
screen: settings,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
}
|
||||
},
|
||||
myCoupons:{
|
||||
screen: myCoupons,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
}
|
||||
},
|
||||
SettingInside:{
|
||||
screen: SettingInside,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
}
|
||||
},
|
||||
language:{
|
||||
screen: language,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
const loginStack = StackNavigator({
|
||||
Login:{
|
||||
screen: Login,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
}
|
||||
},
|
||||
SignUpInformation:{
|
||||
screen:SignUpInformation,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
}
|
||||
},
|
||||
SignUpVerify:{
|
||||
screen:SignUpVerify,
|
||||
navigationOptions:{
|
||||
header: null,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
|
||||
const TabRoutes = TabNavigator(
|
||||
{
|
||||
menu: {
|
||||
screen: menu,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
headerTitle: "Menu",
|
||||
},
|
||||
},
|
||||
|
||||
myOrders: {
|
||||
screen: myOrders,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
headerTitle: "My Orders"
|
||||
}
|
||||
},
|
||||
|
||||
account: {
|
||||
screen: account,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
headerTitle: "Account"
|
||||
}
|
||||
},
|
||||
|
||||
settingStack: {
|
||||
screen: settingStack,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
headerTitle: "Settings"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
initialRouteName: "menu",
|
||||
|
||||
navigationOptions: ({ navigation }) => {
|
||||
|
||||
const { routeName, routes } = navigation.state;
|
||||
let params = routes && routes[1] && routes[1].params;
|
||||
return {
|
||||
gesturesEnabled: false,
|
||||
|
||||
tabBarIcon: ({ focused, tintColor }) => {
|
||||
const { routeName } = navigation.state;
|
||||
let iconName;
|
||||
switch (routeName) {
|
||||
case "menu":
|
||||
iconName = require("../images/menubarmenu.png");
|
||||
break;
|
||||
case "myOrders":
|
||||
iconName = require("../images/menubarmyorder.png");
|
||||
break;
|
||||
case "account":
|
||||
iconName = require("../images/menubarprofile.png");
|
||||
break;
|
||||
case "settingStack":
|
||||
iconName = require("../images/menubarsetting.png");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
// You can return any component that you like here! For demo we use an
|
||||
// icon component from react-native-vector-icons
|
||||
|
||||
return<FastImage
|
||||
source={iconName}
|
||||
style={{tintColor:tintColor}}
|
||||
/>
|
||||
//return <Icon name={iconName} size={24} color={tintColor} />;
|
||||
}
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
|
||||
tabBarOptions: {
|
||||
showIcon: true,
|
||||
showLabel:true,
|
||||
activeTintColor: theme.mainColor,
|
||||
inactiveTintColor: "#858585",
|
||||
style: {
|
||||
height: 60,
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 5,
|
||||
backgroundColor: "white"
|
||||
},
|
||||
tabStyle:{
|
||||
alignSelf: 'center',
|
||||
backgroundColor: 'white'
|
||||
},
|
||||
iconStyle:{
|
||||
height:60,
|
||||
|
||||
},
|
||||
labelStyle: {
|
||||
fontSize: 12,
|
||||
lineHeight: 20,
|
||||
fontFamily:Fonts.century
|
||||
}
|
||||
},
|
||||
tabBarComponent: ({ jumpToIndex, ...props, navigation }) => (
|
||||
<TabBarBottom
|
||||
{...props}
|
||||
jumpToIndex = { tabIndex => {
|
||||
const currentIndex = navigation.state.index;
|
||||
|
||||
if (tabIndex == 1) {
|
||||
// do some thing. Call Native Live Stream Record
|
||||
|
||||
if(!Global.login){
|
||||
|
||||
navigation.navigate('Login')
|
||||
}else{
|
||||
navigation.navigate('myOrders')
|
||||
|
||||
}
|
||||
} else if (tabIndex == 2){
|
||||
// navigation.navigate('account')
|
||||
if(!Global.login){
|
||||
|
||||
navigation.navigate('Login')
|
||||
}else{
|
||||
navigation.navigate('account')
|
||||
|
||||
}
|
||||
} else {
|
||||
jumpToIndex(tabIndex);
|
||||
}
|
||||
console.log('Select tab: ', tabIndex);
|
||||
}}
|
||||
/>),
|
||||
|
||||
tabBarPosition: "bottom",
|
||||
animationEnabled: true,
|
||||
swipeEnabled: false,
|
||||
},
|
||||
|
||||
);
|
||||
|
||||
|
||||
|
||||
// add your router below
|
||||
const Navigator = StackNavigator({
|
||||
init: {
|
||||
screen: init,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
}
|
||||
},
|
||||
TabRoutes: {
|
||||
screen: TabRoutes,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
}
|
||||
},
|
||||
|
||||
Login:{
|
||||
screen: Login,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
OrderDetails: {
|
||||
screen: OrderDetails,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
}
|
||||
},
|
||||
|
||||
NotificationSetting: {
|
||||
screen: Login,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
}
|
||||
},
|
||||
|
||||
Location: {
|
||||
screen: Locations,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
}
|
||||
},
|
||||
|
||||
LocationRequest: {
|
||||
screen: LocationRequest,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
}
|
||||
},
|
||||
|
||||
ConfirmOrder: {
|
||||
screen: ConfirmOrder,
|
||||
navigationOptions: {
|
||||
header: null,
|
||||
gesturesEnabled: false
|
||||
}
|
||||
},
|
||||
|
||||
SignUpInformation: {
|
||||
screen: SignUpInformation,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
}
|
||||
},
|
||||
|
||||
pay: {
|
||||
screen: pay,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
}
|
||||
},
|
||||
|
||||
SignUpVerify: {
|
||||
screen: SignUpVerify,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
},
|
||||
},
|
||||
ForgetPassword: {
|
||||
screen: ForgetPassword,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
},
|
||||
},
|
||||
AddCard: {
|
||||
screen: AddCard,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
}
|
||||
},
|
||||
Tutorial:{
|
||||
screen: Tutorial,
|
||||
navigationOptions: {
|
||||
header: null
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default Navigation;
|
||||
77
app/navigation/sideMenu.js
Executable file
77
app/navigation/sideMenu.js
Executable file
@@ -0,0 +1,77 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { NavigationActions } from 'react-navigation';
|
||||
import { ScrollView, View, TouchableOpacity} from 'react-native';
|
||||
import Icon from 'react-native-vector-icons/dist/Ionicons';
|
||||
import Size from '../config/size'
|
||||
import Text from 'react-native-text';
|
||||
const size = new Size
|
||||
import { observer,inject } from 'mobx-react/native';
|
||||
import {scale, verticalScale, moderateScale } from 'react-native-size-matters';
|
||||
import AsyncStorageHelper from "../config/asyncStorageHelper";
|
||||
const asyncStorageHelper = new AsyncStorageHelper();
|
||||
const items = [{id: 0,title:"Menu of the Day", icon:"md-beer",screen: "menu"},
|
||||
{id: 1, title:"My Orders", icon:"md-list-box",screen: "myOrders"},
|
||||
{id: 2, title:"Account", icon:"md-contact",screen: "account"},
|
||||
{id: 3, title:"Settings", icon:"md-settings",screen: "settings"},]
|
||||
|
||||
@inject(["menuStore"],["userStore"])
|
||||
@observer
|
||||
export default class SideMenu extends Component {
|
||||
|
||||
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = this.props.userStore
|
||||
}
|
||||
|
||||
onPressAction(screen){
|
||||
this.props.navigation.navigate('DrawerClose')
|
||||
console.log(this.store.logined +screen)
|
||||
if(this.store.logined){
|
||||
//this.navigateToScreen('account')
|
||||
this.props.navigation.navigate(screen)
|
||||
}else{
|
||||
this.props.navigation.navigate('Login')
|
||||
}
|
||||
}
|
||||
|
||||
renderItems(){
|
||||
return items.map((item) => {
|
||||
return (
|
||||
<TouchableOpacity style = {{flexDirection:'row',marginBottom:20,marginLeft:10}}
|
||||
onPress = {()=>this.onPressAction(item.screen)} key = {item.id}>
|
||||
<Icon name={item.icon} size={size.getSize(24)} color={'black'} />
|
||||
<Text style = {{fontSize: 20,marginLeft: 5,}}>
|
||||
{item.title}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
|
||||
<View style={{backgroundColor:'gray',height:100,alignItems:'center',justifyContent: 'center',paddingBottom:20}}>
|
||||
<Text>
|
||||
Hello
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<ScrollView>
|
||||
{this.renderItems()}
|
||||
</ScrollView>
|
||||
|
||||
<View style = {{borderTopColor:'black', borderTopWidth:1, height:verticalScale(200),alignItems:'center',justifyContent: 'center',}}>
|
||||
<Icon name={'md-mail'} size={size.getSize(60)} color={'black'} onPress = {()=>{ asyncStorageHelper.removeItemValue("pickupPointId")}} />
|
||||
</View>
|
||||
|
||||
</View>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
12
app/navigation/storeMethod.js
Executable file
12
app/navigation/storeMethod.js
Executable file
@@ -0,0 +1,12 @@
|
||||
|
||||
import { observable } from "mobx";
|
||||
import { observer, inject } from "mobx-react/native";
|
||||
|
||||
|
||||
@inject(["menuStore"], ["userStore"])
|
||||
@observer
|
||||
export default class StoreMethod {
|
||||
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user