This commit is contained in:
Ren Juan 2021-08-18 18:21:15 +00:00
parent 806f20482d
commit 98fae0376e
7 changed files with 157 additions and 77 deletions

View File

@ -1,27 +1,64 @@
import 'react-native-gesture-handler'; import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar'; import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import Switch from 'react-native'; import { Platform, Text, View, Switch, StyleSheet } from 'react-native';
import * as Location from 'expo-location';
import { SafeAreaProvider } from 'react-native-safe-area-context'; import { SafeAreaProvider } from 'react-native-safe-area-context';
import useCachedResources from './hooks/useCachedResources'; import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme'; import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation'; import Navigation from './navigation';
export var debug:boolean = false;
export var expoGeoState:any;
export var tripInProgress:boolean = true;
export default function App() { export default function App() {
const isLoadingComplete = useCachedResources(); const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
const [isKM, setIsKM] = useState(false); const [isKM, setIsKM] = useState(false);
const toggleUnits = () => setIsKM(previousState => !previousState); const toggleUnits = () => setIsKM(previousState => !previousState);
const [location, setLocation] = useState(Object);
const [errorMsg, setErrorMsg] = useState("");
useEffect(() => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
})();
}, []);
expoGeoState = 'Waiting..';
if (errorMsg) {
expoGeoState = errorMsg;
} else if (location) {
expoGeoState = JSON.stringify(location);
}
if (!isLoadingComplete) { if (!isLoadingComplete) {
return null; return null;
} else { } else {
if (!debug)
return ( return (
<SafeAreaProvider> <SafeAreaProvider>
<Navigation colorScheme={colorScheme} /> <Navigation colorScheme={colorScheme} />
<StatusBar /> <StatusBar />
</SafeAreaProvider> </SafeAreaProvider>
); );
else
return (
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<Text>{expoGeoState}</Text>
<StatusBar />
</SafeAreaProvider>
);
} }
} }
export function toggleTripInProgress() {tripInProgress = !tripInProgress;}

View File

@ -1,42 +0,0 @@
import React, { useState, useEffect } from 'react';
import { Platform, Text, View, StyleSheet } from 'react-native';
import * as Location from 'expo-location';
export class GT2Service {
constructor () {
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
}
start() {
useEffect(() => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
})();
}, []);
let text = 'Waiting..';
if (errorMsg) {
text = errorMsg;
} else if (location) {
text = JSON.stringify(location);
}
return (
<View style={styles.container}>
<Text style={styles.paragraph}>{text}</Text>
</View>
);
}
}

View File

@ -40,6 +40,12 @@ export function ScreenInfo3() {
darkColor="rgba(255,255,255,0.8)"> darkColor="rgba(255,255,255,0.8)">
Green Travel Carbon Calculator v. 2 Green Travel Carbon Calculator v. 2
</Text> </Text>
<Text
style={styles.versionText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)">
expo version
</Text>
</View> </View>
); );
} }
@ -54,5 +60,8 @@ const styles = StyleSheet.create({
lineHeight: 24, lineHeight: 24,
textAlign: 'center', textAlign: 'center',
}, },
versionText: {
fontSize: 8,
textAlign: 'center',
},
}); });

View File

@ -7,15 +7,14 @@ import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react'; import * as React from 'react';
import Colors from '../constants/Colors'; import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme'; import useColorScheme from '../hooks/useColorScheme';
import SplashScreen from '../screens/SplashScreen'; import SplashScreen from '../screens/SplashScreen';
import TripScreen from '../screens/TripScreen';
import SettingsScreen from '../screens/SettingsScreen'; import SettingsScreen from '../screens/SettingsScreen';
import TripScreen from '../screens/TripScreen';
import { SplashParamList, BottomTabParamList, TripParamList, SettingsParamList } from '../types'; import { SplashParamList, BottomTabParamList, TripParamList, SettingsParamList } from '../types';
const BottomTab = createBottomTabNavigator<BottomTabParamList>(); export const BottomTab = createBottomTabNavigator<BottomTabParamList>();
export default function BottomTabNavigator() { export default function BottomTabNavigator() {
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
@ -25,7 +24,7 @@ export default function BottomTabNavigator() {
initialRouteName="Splash" initialRouteName="Splash"
tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}> tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
<BottomTab.Screen <BottomTab.Screen
name="Home" name="Splash"
component={SplashNavigator} component={SplashNavigator}
options={{ options={{
tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />, tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
@ -57,8 +56,7 @@ function TabBarIcon(props: { name: React.ComponentProps<typeof Ionicons>['name']
// Each tab has its own navigation stack, you can read more about this pattern here: // Each tab has its own navigation stack, you can read more about this pattern here:
// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab // https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
const SplashStack = createStackNavigator<TripParamList>(); const SplashStack = createStackNavigator<SplashParamList>();
const TripStack = createStackNavigator<TripParamList>();
function SplashNavigator() { function SplashNavigator() {
return ( return (
@ -72,6 +70,8 @@ function SplashNavigator() {
); );
} }
const TripStack = createStackNavigator<TripParamList>();
function TripNavigator() { function TripNavigator() {
return ( return (
<TripStack.Navigator> <TripStack.Navigator>

View File

@ -1,34 +1,24 @@
import * as React from 'react'; import * as React from 'react';
import { Component } from 'react';
import { Button, StyleSheet, Alert } from 'react-native'; import { Button, StyleSheet, Alert } from 'react-native';
import { Text, View } from '../components/Themed'; import { Text, View } from '../components/Themed';
import { GT2Service } from '../GT2Service.js';
import { ScreenInfo2 } from '../components/ScreenInfo'; import { ScreenInfo2 } from '../components/ScreenInfo';
import { geocodeAsync } from 'expo-location';
import * as GT2 from '../App';
import * as Nav from '../navigation/BottomTabNavigator';
import Navigation from '../navigation';
export default function TripScreen() { var elapsed:number, lat:number, long:number, ds:number, v:number;
return (
<View style={styles.container}>
<Text style={styles.title}>Trip Control</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<ScreenInfo2 />
<View style={styles.controls} >
<Button
title="Start"
onPress={() => Alert.alert('Trip Started')}
/>
<Button
title="Pause"
onPress={() => Alert.alert('Trip Paused')}
/>
<Button
title="Stop"
onPress={() => Alert.alert('Trip Completed')}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({ const styles = StyleSheet.create({
tripText: {
marginHorizontal: -100,
marginVertical: 60,
textAlign: 'left',
width: "80%",
fontSize: 12,
fontWeight: 'bold',
},
container: { container: {
flex: 1, flex: 1,
alignItems: 'center', alignItems: 'center',
@ -49,3 +39,85 @@ const styles = StyleSheet.create({
width: '80%', width: '80%',
}, },
}); });
function startTrip() {
GT2.toggleTripInProgress();
elapsed = 0.0;
lat = 0.0;
long = 0.0;
ds = 0.0;
v = 0.0;
Alert.alert('Trip Started');
}
function pauseTrip() {
Alert.alert('Trip Paused');
}
function endTrip() {
GT2.toggleTripInProgress();
Alert.alert('Trip Ended');
}
export default function TripScreen() {
if (!GT2.tripInProgress)
return (
<View style={styles.container}>
<Text style={styles.title}>Trip Control</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<ScreenInfo2 />
<View style={styles.controls} >
<Button
title="Start"
onPress={() => startTrip() }
/>
<Button
title="Pause"
onPress={() => pauseTrip()}
/>
<Button
title="Stop"
onPress={() => endTrip() }
/>
</View>
</View>
); else
return (
<View style={styles.container}>
<Text style={styles.title}>Trip Control</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<ScreenInfo2 />
<View style={styles.controls} >
<Button
title="Start"
onPress={() => startTrip() }
/>
<Button
title="Pause"
onPress={() => pauseTrip()}
/>
<Button
title="Stop"
onPress={() => endTrip() }
/>
</View>
<View>
<Text style={styles.tripText}>
{'Elapsed: '}{elapsed}{'\n'}
{'Geo: '}{lat}{long}{'\n'}
{'Vector: '}{ds}{v}{'\n'}
</Text>
</View>
</View>
);
}

View File

@ -9,6 +9,7 @@ export type RootStackParamList = {
}; };
export type BottomTabParamList = { export type BottomTabParamList = {
Splash: undefined;
Trip: undefined; Trip: undefined;
Settings: undefined; Settings: undefined;
}; };

View File

@ -13,6 +13,9 @@
The expo client will remain standalone, not support backend function and other enhancements. The expo client will remain standalone, not support backend function and other enhancements.
Note: the initial expo app on App Store/Play will be replaced by the full react native version
and a binaries for the expo client will be downloadable from greentravel.app .
There will be several iterations of it before There will be several iterations of it before
... ...