forked from cemaden-educacao/WPD-MobileApp
GabrielTrettel
4 years ago
1 changed files with 68 additions and 4 deletions
@ -1,13 +1,77 @@ |
|||||
import React from "react"; |
|
||||
|
import React, { useState } from "react"; |
||||
import Screen from "../components/Screen"; |
import Screen from "../components/Screen"; |
||||
import InDevelopment from "../components/InDevelopment"; |
|
||||
|
import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native"; |
||||
|
import { dimensions } from "../config/dimensions"; |
||||
|
import colors from "../config/colors"; |
||||
|
|
||||
|
function forecastDay(day, setDay) { |
||||
|
return ( |
||||
|
<View style={styles.forecastDays}> |
||||
|
<TouchableNativeFeedback onPress={() => setDay(0)}> |
||||
|
<View |
||||
|
style={[ |
||||
|
styles.forecastDayBtn, |
||||
|
{ borderBottomColor: day == 0 ? colors.lightBlue : colors.white }, |
||||
|
]} |
||||
|
> |
||||
|
<Text style={{ color: day == 0 ? colors.lightBlue : colors.black }}> |
||||
|
HOJE |
||||
|
</Text> |
||||
|
</View> |
||||
|
</TouchableNativeFeedback> |
||||
|
|
||||
|
<TouchableNativeFeedback onPress={() => setDay(1)}> |
||||
|
<View |
||||
|
style={[ |
||||
|
styles.forecastDayBtn, |
||||
|
{ borderBottomColor: day == 1 ? colors.lightBlue : colors.white }, |
||||
|
]} |
||||
|
> |
||||
|
<Text style={{ color: day == 1 ? colors.lightBlue : colors.black }}> |
||||
|
PRÓXIMO |
||||
|
</Text> |
||||
|
</View> |
||||
|
</TouchableNativeFeedback> |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
function renderTodayForecast() { |
||||
|
return <Text>dia</Text>; |
||||
|
} |
||||
|
|
||||
|
function renderWeekForecast() { |
||||
|
return <Text>semana</Text>; |
||||
|
} |
||||
|
|
||||
function ForecastScreen(props) { |
function ForecastScreen(props) { |
||||
|
const [day, setDay] = useState(0); |
||||
|
|
||||
return ( |
return ( |
||||
<Screen> |
|
||||
<InDevelopment /> |
|
||||
|
<Screen style={styles.container}> |
||||
|
{forecastDay(day, setDay)} |
||||
|
{day == 0 ? renderTodayForecast() : renderWeekForecast()} |
||||
</Screen> |
</Screen> |
||||
); |
); |
||||
} |
} |
||||
|
|
||||
|
const styles = StyleSheet.create({ |
||||
|
container: { |
||||
|
padding: dimensions.spacing.normal_padding, |
||||
|
}, |
||||
|
|
||||
|
forecastDays: { |
||||
|
flexDirection: "row", |
||||
|
justifyContent: "space-between", |
||||
|
}, |
||||
|
|
||||
|
forecastDayBtn: { |
||||
|
borderBottomWidth: 3, |
||||
|
width: "48%", |
||||
|
height: 30, |
||||
|
justifyContent: "center", |
||||
|
alignItems: "center", |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
export default ForecastScreen; |
export default ForecastScreen; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue