TIL/React
[React]
yeoney
2023. 9. 5. 00:41
반응형
import * as Location from "expo-location"
import React, { useEffect, useState } from "react";
import {View, Text, Dimensions, StyleSheet, ScrollView} from 'react-native';
const { width : SCREEN_WIDTH } = Dimensions.get('window');
export default function App() {
const [city, setCity] = useState("Loading...")
const [location, setLocation] = useState();
const [ok, setOk] = useState(true);
const ask = async() => {
const {granted} = await Location.requestForegroundPermissionsAsync();
if (!granted) {
setOk(false);
}
const {coords: {latitude, longitude}} = await Location.getCurrentPositionAsync({accuracy: 5});
const location = await Location.reverseGeocodeAsync(
{latitude, longitude},
{useGoogleMaps:false}
);
setCity(location[0].city);
};
useEffect(() => {
ask();
}, [])
return (
<View style={styles.container}>
<View style={styles.city}>
<Text style={styles.cityName}>{city}</Text>
</View>
<ScrollView
showsHorizontalScrollIndicator
pagingEnabled
indicatorStyle="white"
horizontal contentContainerStyle={styles.weather}>
<View style={styles.day}>
<Text style={styles.temp}>24</Text>
<Text style={styles.description}>cloudy</Text>
</View>
<View style={styles.day}>
<Text style={styles.temp}>24</Text>
<Text style={styles.description}>cloudy</Text>
</View>
<View style={styles.day}>
<Text style={styles.temp}>24</Text>
<Text style={styles.description}>cloudy</Text>
</View>
<View style={styles.day}>
<Text style={styles.temp}>24</Text>
<Text style={styles.description}>cloudy</Text>
</View>
<View style={styles.day}>
<Text style={styles.temp}>24</Text>
<Text style={styles.description}>cloudy</Text>
</View>
<View style={styles.day}>
<Text style={styles.temp}>24</Text>
<Text style={styles.description}>cloudy</Text>
</View>
<View style={styles.day}>
<Text style={styles.temp}>24</Text>
<Text style={styles.description}>cloudy</Text>
</View>
</ScrollView>
</View>
)
}
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor : "tomato",
},
city : {
flex : 1.2,
// backgroundColor: "blue",
justifyContent: "center",
alignItems: "center",
},
cityName: {
color : "black",
fontSize : 80,
fontWeight: "500",
},
weather : {
// backgroundColor : "blue",
},
day: {
width: SCREEN_WIDTH,
alignItems : "center",
// backgroundColor: "teal",
},
temp : {
marginTop : 50,
fontSize : 156,
},
description : {
marginTop : -10,
fontSize : 50
}
});
반응형