cemaden-educacao
/
WPD-MobileApp
2
1
Fork 1
Code Issues 2 Pull Requests Projects Releases Wiki Activity
Browse Source

pluviometer screen more responsive to display sizes

master
analuizaff 4 years ago
parent
5061d83850
commit
b11f972698
4 changed files with 83 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/App.js
  2. 2
      src/app/navigation/SharingDataOptionsNavigator.js
  3. 56
      src/app/screens/PluviometerSharingDataScreen.js
  4. 92
      src/app/screens/SharingDataScreen.js

1
src/App.js
View File

@ -14,6 +14,7 @@ export default function App() {
global.userDataBase = openDatabase();
initDatabase(global.userDataBase);
const Stack = createStackNavigator();
return (
<NavigationContainer theme={navigationTheme}>
<SharingDataOptionsNavigator/>

2
src/app/navigation/SharingDataOptionsNavigator.js
View File

@ -15,7 +15,7 @@ function SharingDataOptionsNavigator() {
return (
<Stack.Navigator initialRouteName="SharingData">
<Stack.Screen
name="nãoqueromais"
name="appNavigator"
component={AppNavigator}
options={{
headerShown: false

56
src/app/screens/PluviometerSharingDataScreen.js
View File

@ -19,6 +19,9 @@ import { FontAwesome5 } from '@expo/vector-icons';
import { showMessage } from "react-native-flash-message";
import moment from 'moment';
import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions";
const dims = scaleDimsFromWidth(85, 85, 25);
const validationSchema = Yup.object().shape({
pluviometer: Yup.number().required("Campo obrigatório").min(0, "O valor deve ser maior ou igual a 0.").max(10000).label("pluviometer"),
@ -74,7 +77,7 @@ function PluviometerSharingDataScreen(props) {
return (
<Screen style={styles.container}>
<View style={{ alignSelf: "center" }}>
<View style={{ alignItems: "center" }}>
<Image
style={styles.image}
source={require("../assets/pluviometro.png")}
@ -87,7 +90,7 @@ function PluviometerSharingDataScreen(props) {
<Form
initialValues={{
pluviometer: "",
data:"",
data: "",
images: [],
}}
onSubmit={(values) => {
@ -105,30 +108,33 @@ function PluviometerSharingDataScreen(props) {
<View style={{ marginTop: 30, flex: 1 }}>
<Text style={styles.labelStyle}>
Quantidade de chuva:
</Text>
<FormField
keyboardType="number-pad"
maxLength={200}
name="pluviometer"
placeholder="Digite a quantidade de chuva"
flex= {1}
/>
</Text>
<View style={{ flex: 1, flexDirection: 'row' }}>
<FormField
keyboardType="number-pad"
maxLength={200}
name="pluviometer"
placeholder="Digite a quantidade de chuva"
/>
</View>
</View>
<View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
<View style={{ marginTop: 10, flex: 1, borderRadius: 25 }}>
<Text style={styles.labelStyle}>
Data da coleta:
</Text>
<View style={{flexDirection:"row"}}>
<FormField
keyboardType="numbers-and-punctuation"
maxLength={10}
name="data"
placeholder="dd/mm/aaaa"
width={240}
values={dateTime}
/>
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<FormField
keyboardType="numbers-and-punctuation"
maxLength={10}
name="data"
placeholder="dd/mm/aaaa"
values={dateTime}
flex={1}
/>
</View>
<FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
</View>
{/*
<TouchableOpacity style={styles.datepickerStyle}
@ -195,7 +201,7 @@ function PluviometerSharingDataScreen(props) {
</View>
</TouchableOpacity>
*/}
</View>
</View>
<FormImagePicker
backgroundColor="#1976D2"
name="images"
@ -214,11 +220,11 @@ const styles = StyleSheet.create({
container: {
padding: 10,
flex: 1
},
image: {
width: 85,
height: 85,
width: dims.width * 0.8,
height: dims.height * 0.8,
justifyContent: "center",
alignItems: "center",
},

92
src/app/screens/SharingDataScreen.js
View File

@ -1,57 +1,59 @@
import React from "react";
import { StyleSheet, View } from "react-native";
import { Image, Text, TouchableOpacity } from "react-native";
import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
import assets from "../config/assets"
//1/3
function SharingDataScreen({ navigation }) {
return (
<View style={styles.container}>
<View style={{ flexDirection: "row", justifyContent: "space-around" }}>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("FloodSharingData")}
>
<Image
style={styles.floodingLogo}
source={assets.floodZones.floodIcon}
/>
<Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
</TouchableOpacity>
<ScrollView>
<View style={{ flexDirection: "row", justifyContent: "space-around" }}>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("FloodSharingData")}
>
<Image
style={styles.floodingLogo}
source={assets.floodZones.floodIcon}
/>
<Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("RainSharingData")}
>
<Image
style={styles.floodingLogo}
source={assets.rainLevel.rain_2_5}
/>
<Text style={styles.text}>Chuva</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("RainSharingData")}
>
<Image
style={styles.floodingLogo}
source={assets.rainLevel.rain_2_5}
/>
<Text style={styles.text}>Chuva</Text>
</TouchableOpacity>
</View>
<View style={{ flexDirection: "row", justifyContent: "space-around" }}>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("PluviometerSharingData")}
>
<Image style={styles.floodingLogo} source={assets.pluviometer} />
<Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
</TouchableOpacity>
<View style={{ flexDirection: "row", justifyContent: "space-around" }}>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("PluviometerSharingData")}
>
<Image style={styles.floodingLogo} source={assets.pluviometer} />
<Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
</TouchableOpacity>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("RiverFloodData")}
>
<Image
style={styles.floodingLogo}
source={assets.riverLevel.riverIcon}
/>
<Text style={styles.text}>Nível de água {"\n"}no rio</Text>
</TouchableOpacity>
</View>
<TouchableOpacity
style={{ alignItems: "center" }}
onPress={() => navigation.navigate("RiverFloodData")}
>
<Image
style={styles.floodingLogo}
source={assets.riverLevel.riverIcon}
/>
<Text style={styles.text}>Nível de água {"\n"}no rio</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
}
@ -72,6 +74,12 @@ const styles = StyleSheet.create({
height: 85,
marginTop: 70,
},
container: {
paddingHorizontal: 10,
paddingBottom: 10,
flex: 1
},
});

Write Preview
Loading…
Cancel
Save