Browse Source

Screen: Rain sharing data

master
analuizaff 4 years ago
parent
commit
ac936430d2
  1. 4
      src/App.js
  2. BIN
      src/app/assets/chuva_forte.png
  3. BIN
      src/app/assets/chuva_fraca.png
  4. BIN
      src/app/assets/chuva_muito_forte.png
  5. BIN
      src/app/assets/chuva_pancadas.png
  6. BIN
      src/app/assets/sem_chuva.png
  7. 20
      src/app/navigation/RainSharingDataNavigator.js
  8. 125
      src/app/screens/RainSharingDataScreen.js
  9. 23
      src/app/screens/SharingDataScreen.js

4
src/App.js

@ -8,13 +8,15 @@ import openDatabase from "./app/database/database-connection";
import SharingFloodZonesScreen from "./app/screens/SharingFloodZonesScreen";
import initDatabase from "./app/database/database-init";
import RainSharingDataScreen from "./app/screens/RainSharingDataScreen";
export default function App() {
global.userDataBase = openDatabase();
initDatabase(global.userDataBase);
return (
// <SharingFloodZonesScreen />
//<SharingFloodZonesScreen />
//<RainSharingDataScreen/>
<NavigationContainer theme={navigationTheme}>
<AppNavigator />
</NavigationContainer>

BIN
src/app/assets/chuva_forte.png

After

Width: 438  |  Height: 444  |  Size: 99 KiB

BIN
src/app/assets/chuva_fraca.png

After

Width: 314  |  Height: 314  |  Size: 49 KiB

BIN
src/app/assets/chuva_muito_forte.png

After

Width: 554  |  Height: 548  |  Size: 130 KiB

BIN
src/app/assets/chuva_pancadas.png

After

Width: 547  |  Height: 566  |  Size: 134 KiB

BIN
src/app/assets/sem_chuva.png

After

Width: 242  |  Height: 242  |  Size: 35 KiB

20
src/app/navigation/RainSharingDataNavigator.js

@ -0,0 +1,20 @@
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, YellowBox } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import RainSharingDataScreen from '../screens/RainSharingDataScreen';
import SharingDataScreen from '../screens/SharingDataScreen';
const RootStack = createStackNavigator(
{
Home: { screen: SharingDataScreen },
Profile: { screen: RainSharingDataScreen },
},
{
initialRouteName: 'SharingData',
}
);
export default class App extends Component {
render() {
return <RootStack />;
}
}

125
src/app/screens/RainSharingDataScreen.js

@ -0,0 +1,125 @@
import React from "react";
import { StyleSheet, View } from "react-native";
import * as Yup from "yup";
import {
Form,
FormField,
FormPicker as Picker,
SubmitButton,
} from "../components/forms";
import CategoryPickerItem from "../components/CategoryPickerItem";
import Screen from "../components/Screen";
import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import { Image, Text, TouchableOpacity } from 'react-native';
//1/3
const styles = StyleSheet.create({
container: {
paddingTop: 50,
},
rainLogo: {
width: 110,
height: 100,
margin: 30,
},
floodingLogo: {
width: 85,
height: 85,
marginTop: 30,
},
})
const validationSchema = Yup.object().shape({
images: Yup.array().min(1, "Por favor, selecione ao menos uma imagem"),
description: Yup.string()
.label("Description")
.required("Por favor, forneça uma descrição"),
});
const RainSharingDataScreen = ({ navigation }) => {
return (
<Screen style={styles.container}>
<Form
initialValues={{
title: "",
price: "",
description: "",
category: null,
images: [],
}}
onSubmit={(values) => console.log("submissao")}
validationSchema={validationSchema}
>
<View>
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray' }}>
Enviar uma informação
</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View style={{ alignItems: 'center' }}>
<Image
style={styles.floodingLogo}
source={require("../assets/sem_chuva.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Sem chuva</Text>
</View>
<View style={{ alignItems: 'center' }}>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva fraca</Text>
</View>
<TouchableOpacity style={{ alignItems: 'center' }}>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva{"\n"}moderada</Text>
</TouchableOpacity>
</View>
<View style={{ flexDirection: 'row' }}>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View style={{ alignItems: 'center' }}>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_forte.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva forte</Text>
</View>
<View style={{ alignItems: 'center' }}>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_muito_forte.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva muito{"\n"}forte</Text>
</View>
<View style={{ alignContent: 'center' }}>
<Image
style={styles.floodingLogo}
source={require("../assets/chuva_pancadas.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pancada de{"\n"}chuva</Text>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
</View>
</View>
<FormImagePicker backgroundColor="blue" name="images"/>
</Form>
</Screen>
);
}
export default RainSharingDataScreen;

23
src/app/screens/SharingDataScreen.js

@ -12,8 +12,7 @@ import CategoryPickerItem from "../components/CategoryPickerItem";
import Screen from "../components/Screen";
import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import { Image, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Image, Text, TouchableOpacity} from 'react-native';
//1/3
const styles = StyleSheet.create({
container:{
@ -31,27 +30,37 @@ const styles = StyleSheet.create({
},
})
const SharingDataScreen = () => {
class SharingDataScreen extends React.Component {
static navigationOptions = {
title: "SharingDataScreen",
headerStyle: {
backgroundColor: "#73C6B6"
}
};
render() {
return(
<View style={styles.container}>
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray'}}>
Enviar uma informação
</Text>
<View style={{flexDirection:'row', justifyContent: 'space-around'}}>
<TouchableOpacity>
<Image
style = {styles.floodingLogo}
source={require("../assets/pontos_alagamento_peq.png")}
/>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.props.navigation.navigate("RainSharingData")}>
<Image
style = {styles.floodingLogo}
source={require("../assets/chuva_peq.png")}
/>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row'}}>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 50}}>Pontos de {"\n"}alagamento</Text>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 130}}>Chuva</Text>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 110}}>Chuva</Text>
</View>
<View style={{flexDirection:'row', justifyContent: 'space-around'}}>
@ -71,6 +80,6 @@ const SharingDataScreen = () => {
</View>
);
}
}
export default SharingDataScreen;
Loading…
Cancel
Save