This commit is contained in:
Ren Juan 2021-08-17 22:00:09 +00:00
parent 4c1765b09a
commit 806f20482d
6 changed files with 82 additions and 8 deletions

View File

@ -31,6 +31,19 @@ export function ScreenInfo2() {
);
}
export function ScreenInfo3() {
return (
<View style={styles.settingsContainer}>
<Text
style={styles.settingsText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)">
Green Travel Carbon Calculator v. 2
</Text>
</View>
);
}
const styles = StyleSheet.create({
settingsContainer: {
marginHorizontal: 50,

View File

@ -10,9 +10,10 @@ import * as React from 'react';
import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';
import SplashScreen from '../screens/SplashScreen';
import TripScreen from '../screens/TripScreen';
import SettingsScreen from '../screens/SettingsScreen';
import { BottomTabParamList, TripParamList, SettingsParamList } from '../types';
import { SplashParamList, BottomTabParamList, TripParamList, SettingsParamList } from '../types';
const BottomTab = createBottomTabNavigator<BottomTabParamList>();
@ -21,11 +22,11 @@ export default function BottomTabNavigator() {
return (
<BottomTab.Navigator
initialRouteName="Trip"
initialRouteName="Splash"
tabBarOptions={{ activeTintColor: Colors[colorScheme].tint }}>
<BottomTab.Screen
name="Trip"
component={TripNavigator}
name="Home"
component={SplashNavigator}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
}}
@ -37,6 +38,13 @@ export default function BottomTabNavigator() {
tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
}}
/>
<BottomTab.Screen
name="Trip"
component={TripNavigator}
options={{
tabBarIcon: ({ color }) => <TabBarIcon name="ios-code" color={color} />,
}}
/>
</BottomTab.Navigator>
);
}
@ -49,8 +57,21 @@ function TabBarIcon(props: { name: React.ComponentProps<typeof Ionicons>['name']
// 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
const SplashStack = createStackNavigator<TripParamList>();
const TripStack = createStackNavigator<TripParamList>();
function SplashNavigator() {
return (
<SplashStack.Navigator>
<SplashStack.Screen
name="SplashScreen"
component={SplashScreen}
options={{ headerTitle: 'Green Travel' }}
/>
</SplashStack.Navigator>
);
}
function TripNavigator() {
return (
<TripStack.Navigator>

View File

@ -12,14 +12,19 @@ export default {
screens: {
Root: {
screens: {
Splash: {
screens: {
SplashScreen: 'one',
},
},
Trip: {
screens: {
TripScreen: 'one',
TripScreen: 'two',
},
},
Settings: {
screens: {
SettingsScreen: 'two',
SettingsScreen: 'three',
},
},
},

View File

@ -26,11 +26,11 @@ export default function SettingsScreen() {
<View style={styles.controls} >
<Button
title="Jet"
onPress={() => Alert.alert('Jet Fuel Selected')}
onPress={() => Alert.alert('Jet Fuel Selected \n 285 g / passenger / km')}
/>
<Button
title="Gasoline"
onPress={() => Alert.alert('Gasoline Selected')}
onPress={() => Alert.alert('Gasoline Selected \n 255 g for driver \n only passenger / km')}
/>
<Button
title="Food"

View File

@ -0,0 +1,31 @@
import * as React from 'react';
import { StyleSheet } from 'react-native';
import { Text, View } from '../components/Themed';
import { ScreenInfo3 } from '../components/ScreenInfo';
export default function TripScreen() {
return (
<View style={styles.container}>
<Text style={styles.title}>GT2</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<ScreenInfo3 />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 40,
fontWeight: 'bold',
},
separator: {
marginVertical: 10,
height: 1,
width: '80%',
},
});

View File

@ -20,3 +20,7 @@ export type TripParamList = {
export type SettingsParamList = {
SettingsScreen: undefined;
};
export type SplashParamList = {
SplashScreen: undefined;
};