forked from cemaden-educacao/WPD-MobileApp
analuizaff
4 years ago
3 changed files with 61 additions and 67 deletions
-
BINsrc/app/assets/pluviometro.png
-
11src/app/navigation/RainSharingDataNavigator.js
-
85src/app/screens/SharingDataScreen.js
After Width: 50 | Height: 50 | Size: 413 B |
@ -1,85 +1,82 @@ |
|||||
import React from "react"; |
import React from "react"; |
||||
import { StyleSheet, View } from "react-native"; |
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'; |
|
||||
|
import { Image, Text, TouchableOpacity } from 'react-native'; |
||||
|
import { createStackNavigator } from "@react-navigation/stack"; |
||||
|
import RainSharingDataScreen from '../screens/RainSharingDataScreen'; |
||||
|
|
||||
//1/3
|
//1/3
|
||||
const styles = StyleSheet.create({ |
const styles = StyleSheet.create({ |
||||
container:{ |
|
||||
paddingTop:50, |
|
||||
|
container: { |
||||
|
paddingTop: 50, |
||||
}, |
}, |
||||
rainLogo: { |
rainLogo: { |
||||
width: 110, |
width: 110, |
||||
height:100, |
|
||||
margin:30, |
|
||||
|
height: 100, |
||||
|
margin: 30, |
||||
}, |
}, |
||||
floodingLogo: { |
floodingLogo: { |
||||
width: 85, |
width: 85, |
||||
height:85, |
|
||||
|
height: 85, |
||||
marginTop: 70, |
marginTop: 70, |
||||
|
|
||||
}, |
}, |
||||
}) |
}) |
||||
class SharingDataScreen extends React.Component { |
|
||||
static navigationOptions = { |
|
||||
title: "SharingDataScreen", |
|
||||
headerStyle: { |
|
||||
backgroundColor: "#73C6B6" |
|
||||
} |
|
||||
}; |
|
||||
render() { |
|
||||
return( |
|
||||
|
function SharingDataScreen({ navigation }) { |
||||
|
return ( |
||||
<View style={styles.container}> |
<View style={styles.container}> |
||||
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray'}}> |
|
||||
|
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray', marginTop: 10 }}> |
||||
Enviar uma informação |
Enviar uma informação |
||||
</Text> |
</Text> |
||||
<View style={{flexDirection:'row', justifyContent: 'space-around'}}> |
|
||||
|
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}> |
||||
|
|
||||
<TouchableOpacity> |
|
||||
|
<TouchableOpacity style={{ alignItems: 'center' }}> |
||||
<Image |
<Image |
||||
style = {styles.floodingLogo} |
|
||||
|
style={styles.floodingLogo} |
||||
source={require("../assets/pontos_alagamento_peq.png")} |
source={require("../assets/pontos_alagamento_peq.png")} |
||||
/> |
/> |
||||
|
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pontos de {"\n"}alagamento</Text> |
||||
</TouchableOpacity> |
</TouchableOpacity> |
||||
<TouchableOpacity onPress={() => this.props.navigation.navigate("RainSharingData")}> |
|
||||
|
|
||||
|
<TouchableOpacity style={{ alignItems: 'center' }} onPress={() => navigation.navigate('RainSharingData')}> |
||||
<Image |
<Image |
||||
style = {styles.floodingLogo} |
|
||||
|
style={styles.floodingLogo} |
||||
source={require("../assets/chuva_peq.png")} |
source={require("../assets/chuva_peq.png")} |
||||
/> |
/> |
||||
|
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Chuva</Text> |
||||
</TouchableOpacity> |
</TouchableOpacity> |
||||
</View> |
</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: 110}}>Chuva</Text> |
|
||||
</View> |
|
||||
|
|
||||
<View style={{flexDirection:'row', justifyContent: 'space-around'}}> |
|
||||
|
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}> |
||||
|
|
||||
|
<TouchableOpacity style={{ alignItems: 'center' }}> |
||||
<Image |
<Image |
||||
style = {styles.floodingLogo} |
|
||||
|
style={styles.floodingLogo} |
||||
source={require("../assets/diario_pluviometrico.png")} |
source={require("../assets/diario_pluviometrico.png")} |
||||
/> |
/> |
||||
|
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Diário do{"\n"}pluviômetro</Text> |
||||
|
</TouchableOpacity> |
||||
|
|
||||
|
<TouchableOpacity style={{ alignItems: 'center' }}> |
||||
<Image |
<Image |
||||
style = {styles.floodingLogo} |
|
||||
|
style={styles.floodingLogo} |
||||
source={require("../assets/nivel_rio.png")} |
source={require("../assets/nivel_rio.png")} |
||||
/> |
/> |
||||
</View> |
|
||||
<View style={{flexDirection:'row', justifyContent: 'space-around'}}> |
|
||||
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Diário do{"\n"}pluviômetro</Text> |
|
||||
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Nível de água {"\n"}no rio</Text> |
|
||||
|
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Nível de água {"\n"}no rio</Text> |
||||
|
</TouchableOpacity> |
||||
</View> |
</View> |
||||
</View> |
</View> |
||||
); |
); |
||||
} |
} |
||||
|
const Stack = createStackNavigator(); |
||||
|
|
||||
|
function RainSharingDataNavigator() { |
||||
|
return ( |
||||
|
<Stack.Navigator initialRouteName="SharingData"> |
||||
|
<Stack.Screen name="SharingData" component={SharingDataScreen} /> |
||||
|
<Stack.Screen name="RainSharingData" component={RainSharingDataScreen} /> |
||||
|
</Stack.Navigator> |
||||
|
); |
||||
} |
} |
||||
|
|
||||
export default SharingDataScreen; |
|
||||
|
export default RainSharingDataNavigator; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue