This commit is contained in:
Ren Juan 2021-08-16 22:39:34 +00:00
parent e6b3ee2ea6
commit f3b91c638f
6 changed files with 90 additions and 90 deletions

View File

@ -1,6 +1,7 @@
import 'react-native-gesture-handler';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import React, { useState } from 'react';
import Switch from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import useCachedResources from './hooks/useCachedResources';
@ -10,6 +11,8 @@ import Navigation from './navigation';
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
const [isKM, setIsKM] = useState(false);
const toggleUnits = () => setIsKM(previousState => !previousState);
if (!isLoadingComplete) {
return null;

View File

@ -1,80 +0,0 @@
import * as WebBrowser from 'expo-web-browser';
import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import Colors from '../constants/Colors';
import { MonoText } from './StyledText';
import { Text, View } from './Themed';
export default function EditScreenInfo({ path }: { path: string }) {
return (
<View>
<View style={styles.getStartedContainer}>
<Text
style={styles.getStartedText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)">
Open up the code for this screen:
</Text>
<View
style={[styles.codeHighlightContainer, styles.homeScreenFilename]}
darkColor="rgba(255,255,255,0.05)"
lightColor="rgba(0,0,0,0.05)">
<MonoText>{path}</MonoText>
</View>
<Text
style={styles.getStartedText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)">
Change any of the text, save the file, and your app will automatically update.
</Text>
</View>
<View style={styles.helpContainer}>
<TouchableOpacity onPress={handleHelpPress} style={styles.helpLink}>
<Text style={styles.helpLinkText} lightColor={Colors.light.tint}>
Tap here if your app doesn't automatically update after making changes
</Text>
</TouchableOpacity>
</View>
</View>
);
}
function handleHelpPress() {
WebBrowser.openBrowserAsync(
'https://docs.expo.io/get-started/create-a-new-app/#opening-the-app-on-your-phonetablet'
);
}
const styles = StyleSheet.create({
getStartedContainer: {
alignItems: 'center',
marginHorizontal: 50,
},
homeScreenFilename: {
marginVertical: 7,
},
codeHighlightContainer: {
borderRadius: 3,
paddingHorizontal: 4,
},
getStartedText: {
fontSize: 17,
lineHeight: 24,
textAlign: 'center',
},
helpContainer: {
marginTop: 15,
marginHorizontal: 20,
alignItems: 'center',
},
helpLink: {
paddingVertical: 15,
},
helpLinkText: {
textAlign: 'center',
},
});

View File

@ -0,0 +1,33 @@
import * as WebBrowser from 'expo-web-browser';
import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import Colors from '../constants/Colors';
import { MonoText } from './StyledText';
import { Text, View } from './Themed';
export default function SettingsScreenInfo() {
return (
<View style={styles.settingsContainer}>
<Text
style={styles.settingsText}
lightColor="rgba(0,0,0,0.8)"
darkColor="rgba(255,255,255,0.8)">
Toggle km/mi, set CO2/ea
</Text>
</View>
);
}
const styles = StyleSheet.create({
settingsContainer: {
marginHorizontal: 50,
},
settingsText: {
fontSize: 17,
lineHeight: 24,
textAlign: 'center',
},
});

View File

@ -1,15 +1,36 @@
import * as React from 'react';
import { StyleSheet } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo';
import { StyleSheet, Switch, TextInput } from 'react-native';
import { Text, View } from '../components/Themed';
import { useState } from 'react';
import SettingsScreenInfo from '../components/SettingsScreenInfo';
export default function SettingsScreen() {
const [text, onChangeText] = React.useState("Useless Text");
const [number, onChangeNumber] = React.useState(null);
const [isKM, setIsKM] = useState(false);
const toggleUnits = () => setIsKM(previousState => !previousState);
return (
<View style={styles.container}>
<Text style={styles.title}>Model Settings</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<EditScreenInfo path="/screens/SettingsScreen.tsx" />
<SettingsScreenInfo />
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={true ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleUnits}
value={isKM}
/>
<TextInput
style={styles.input}
onChangeText={onChangeNumber}
value={number}
placeholder="CO2 Per km/mi"
keyboardType="numeric"
/>
</View>
);
}
@ -29,4 +50,10 @@ const styles = StyleSheet.create({
height: 1,
width: '80%',
},
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
});

View File

@ -1,7 +1,5 @@
import * as React from 'react';
import { StyleSheet } from 'react-native';
import EditScreenInfo from '../components/EditScreenInfo';
import { Button, StyleSheet, Alert } from 'react-native';
import { Text, View } from '../components/Themed';
export default function TripScreen() {
@ -9,7 +7,21 @@ export default function TripScreen() {
<View style={styles.container}>
<Text style={styles.title}>Trip Control</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<EditScreenInfo path="/screens/TripScreen.tsx" />
<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>
);
}
@ -20,6 +32,11 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
},
controls: {
width: "80%",
flexDirection: 'row',
justifyContent: "space-between",
},
title: {
fontSize: 20,
fontWeight: 'bold',

View File

@ -1,6 +1,6 @@
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true
"strict": false
}
}