Browse Source

pluviometer screen more responsive to display sizes

master
analuizaff 4 years ago
parent
commit
b11f972698
  1. 1
      src/App.js
  2. 2
      src/app/navigation/SharingDataOptionsNavigator.js
  3. 54
      src/app/screens/PluviometerSharingDataScreen.js
  4. 92
      src/app/screens/SharingDataScreen.js

1
src/App.js

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

2
src/app/navigation/SharingDataOptionsNavigator.js

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

54
src/app/screens/PluviometerSharingDataScreen.js

@ -19,6 +19,9 @@ import { FontAwesome5 } from '@expo/vector-icons';
import { showMessage } from "react-native-flash-message"; import { showMessage } from "react-native-flash-message";
import moment from 'moment'; import moment from 'moment';
import colors from "../config/colors"; import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions";
const dims = scaleDimsFromWidth(85, 85, 25);
const validationSchema = Yup.object().shape({ 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"), 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 ( return (
<Screen style={styles.container}> <Screen style={styles.container}>
<View style={{ alignSelf: "center" }}>
<View style={{ alignItems: "center" }}>
<Image <Image
style={styles.image} style={styles.image}
source={require("../assets/pluviometro.png")} source={require("../assets/pluviometro.png")}
@ -87,7 +90,7 @@ function PluviometerSharingDataScreen(props) {
<Form <Form
initialValues={{ initialValues={{
pluviometer: "", pluviometer: "",
data:"",
data: "",
images: [], images: [],
}} }}
onSubmit={(values) => { onSubmit={(values) => {
@ -105,30 +108,33 @@ function PluviometerSharingDataScreen(props) {
<View style={{ marginTop: 30, flex: 1 }}> <View style={{ marginTop: 30, flex: 1 }}>
<Text style={styles.labelStyle}> <Text style={styles.labelStyle}>
Quantidade de chuva: 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>
<View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
<View style={{ marginTop: 10, flex: 1, borderRadius: 25 }}>
<Text style={styles.labelStyle}> <Text style={styles.labelStyle}>
Data da coleta: Data da coleta:
</Text> </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> </View>
{/* {/*
<TouchableOpacity style={styles.datepickerStyle} <TouchableOpacity style={styles.datepickerStyle}
@ -195,7 +201,7 @@ function PluviometerSharingDataScreen(props) {
</View> </View>
</TouchableOpacity> </TouchableOpacity>
*/} */}
</View>
</View>
<FormImagePicker <FormImagePicker
backgroundColor="#1976D2" backgroundColor="#1976D2"
name="images" name="images"
@ -217,8 +223,8 @@ const styles = StyleSheet.create({
}, },
image: { image: {
width: 85,
height: 85,
width: dims.width * 0.8,
height: dims.height * 0.8,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },

92
src/app/screens/SharingDataScreen.js

@ -1,57 +1,59 @@
import React from "react"; import React from "react";
import { StyleSheet, View } from "react-native"; 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" import assets from "../config/assets"
//1/3 //1/3
function SharingDataScreen({ navigation }) { function SharingDataScreen({ navigation }) {
return ( return (
<View style={styles.container}> <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> </View>
); );
} }
@ -72,6 +74,12 @@ const styles = StyleSheet.create({
height: 85, height: 85,
marginTop: 70, marginTop: 70,
}, },
container: {
paddingHorizontal: 10,
paddingBottom: 10,
flex: 1
},
}); });

Loading…
Cancel
Save