Browse Source

navigation error solved (Needs improvement)

master
analuizaff 4 years ago
parent
commit
68e002ab55
  1. BIN
      src/app/assets/pluviometro.png
  2. 13
      src/app/navigation/RainSharingDataNavigator.js
  3. 115
      src/app/screens/SharingDataScreen.js

BIN
src/app/assets/pluviometro.png

After

Width: 50  |  Height: 50  |  Size: 413 B

13
src/app/navigation/RainSharingDataNavigator.js

@ -8,14 +8,11 @@ import SharingDataScreen from '../screens/SharingDataScreen';
const Stack = createStackNavigator(); const Stack = createStackNavigator();
function RainSharingDataNavigator(){
return(
<NavigationContainer>
<Stack.Navigator initialRouteName = "SharingData">
<Stack.Screen name = "SharingData" component={SharingDataScreen}/>
<Stack.Screen name = "RainSharingData" component={RainSharingDataScreen}/>
</Stack.Navigator>
</NavigationContainer>
function RainSharingDataNavigator() {
return (
<Stack.Navigator>
<Stack.Screen name="RainSharingData" component={RainSharingDataScreen} />
</Stack.Navigator>
); );
} }
export default RainSharingDataNavigator; export default RainSharingDataNavigator;

115
src/app/screens/SharingDataScreen.js

@ -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(
<View style={styles.container}>
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray'}}>
function SharingDataScreen({ navigation }) {
return (
<View style={styles.container}>
<Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray', marginTop: 10 }}>
Enviar uma informação Enviar uma informação
</Text>
<View style={{flexDirection:'row', justifyContent: 'space-around'}}>
</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 style={{ alignItems: 'center' }}>
<Image
style={styles.floodingLogo}
source={require("../assets/pontos_alagamento_peq.png")}
/>
<Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10 }}>Pontos de {"\n"}alagamento</Text>
</TouchableOpacity>
<TouchableOpacity style={{ alignItems: 'center' }} onPress={() => navigation.navigate('RainSharingData')}>
<Image
style={styles.floodingLogo}
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'}}>
<Image
style = {styles.floodingLogo}
source={require("../assets/diario_pluviometrico.png")}
/>
<Image
style = {styles.floodingLogo}
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>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<TouchableOpacity style={{ alignItems: 'center' }}>
<Image
style={styles.floodingLogo}
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
style={styles.floodingLogo}
source={require("../assets/nivel_rio.png")}
/>
<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;
Loading…
Cancel
Save