* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
1
수업 당시에 순서를 따라가면서 엑스포에 빌드했을 때는 배너 광고까지 들어간 상태였고
그때는 다운 받은 앱이 정상적으로(?) 작동을 했습니다.
제가 수업에서 배운 대로의 앱이 아닌 다른 부분을 추가해서 만들면서
메인페이지가 너무 커져버려서 SafeAreaView를 추가해 진행하기도 하고..
아무튼 수업의 진행이 다 된 상태에서 새로 빌드하니
다운받은 앱의 화면이 로딩 화면에서 멈춰버렸습니다.
배너광고나 전면광고에 오류가 발생해서 일까요?
아니면 혹시 광고 삽입 후에 넣은 app.json 부분의
permissions": ["ACCESS_FINE_LOCATION", "ACCESS_COARSE_LOCATION"]
코드때문일까요?
2
메인화면이 지금은 전체 팁이 다 보이도록 되어 있는데
혹시 위의 버튼만 보이도록 하고 팁의 내용은 버튼을 클릭했을 때만 보이도록 설정할 수는 없나요?
여러 방법으로 시도해 보고
horizontal을 vertical로 바꾸기도 하고 middleButton을 button으로 바꾸기도 하는 등 시도를 해 보았으나
결정적으로 메인에서 팁 전체가 보이는 것만은 사라지게 할 수가 없었어요.
제가 만들고 있는 앱은 수업과는 달고 수업의 직접 내용이 아니라 질문하기 죄송스러운 부분도 있습니다만
도대체 물어 볼 곳이 여기뿐이라..;;
가르쳐주시면 감사하겠습니다^^
첫번째 문제 화면빌두 후 다운 받은 것
두번째 가르쳐주시면 좋겠단 얘기드린 화면 입니다.
작성한 코드 및 에러 메세지
import React,{useState,useEffect} from 'react';
import {StyleSheet, View, Image, Text, TouchableOpacity, SafeAreaView, ScrollView} from 'react-native';
import data from '../data.json';
import Card from '../components/Card';
import Loading from '../components/Loading';
import { StatusBar } from 'expo-status-bar';
import * as Location from "expo-location";
import axios from "axios"
import {firebase_db} from "../firebaseConfig"
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-8534463316422476/4889143218';
export default function MainPage({navigation,route}) {
//useState 사용법
//[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수
//setState는 state를 변경시킬때 사용해야하는 함수
//모두 다 useState가 선물해줌
//useState()안에 전달되는 값은 state 초기값
const [state,setState] = useState([])
const [cateState,setCateState] = useState([])
//날씨 데이터 상태관리 상태 생성!
const [weather, setWeather] = useState({
temp : 0,
condition : ''
})
//하단의 return 문이 실행되어 화면이 그려진다음 실행되는 useEffect 함수
//내부에서 data.json으로 부터 가져온 데이터를 state 상태에 담고 있음
const [ready,setReady] = useState(true)
useEffect(()=>{
navigation.setOptions({
title:'나를 빛나게 할 명언'
})
//뒤의 1000 숫자는 1초를 뜻함
//1초 뒤에 실행되는 코드들이 담겨 있는 함수
setTimeout(()=>{
firebase_db.ref('/tip').once('value').then((snapshot) => {
console.log("파이어베이스에서 데이터 가져왔습니다!!")
let tip = snapshot.val();
setState(tip)
setCateState(tip)
getLocation()
setReady(false)
});
// getLocation()
// setState(data.tip)
// setCateState(data.tip)
// setReady(false)
},1000)
},[])
const getLocation = async () => {
//수많은 로직중에 에러가 발생하면
//해당 에러를 포착하여 로직을 멈추고,에러를 해결하기 위한 catch 영역 로직이 실행
try {
//자바스크립트 함수의 실행순서를 고정하기 위해 쓰는 async,await
await Location.requestForegroundPermissionsAsync();
const locationData= await Location.getCurrentPositionAsync();
// console.log(locationData)
// console.log(locationData['coords']['latitude'])
// console.log(locationData['coords']['longitude'])
const latitude = locationData['coords']['latitude']
const longitude = locationData['coords']['longitude']
const API_KEY = "cfc258c75e1da2149c33daffd07a911d";
const result = await axios.get(
`http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
);
const temp = result.data.main.temp;
const condition = result.data.weather[0].main
//오랜만에 복습해보는 객체 리터럴 방식으로 딕셔너리 구성하기!!
//잘 기억이 안난다면 1주차 강의 6-5를 다시 복습해보세요!
setWeather({
temp,condition
})
} catch (error) {
//혹시나 위치를 못가져올 경우를 대비해서, 안내를 준비합니다
Alert.alert("위치를 찾을 수가 없습니다.", "앱을 껐다 켜볼까요?");
}
}
const category = (cate) => {
if(cate == "전체보기"){
//전체보기면 원래 꿀팁 데이터를 담고 있는 상태값으로 다시 초기화
setCateState(state)
}else{
setCateState(state.filter((d)=>{
return d.category == cate
}))
}
}
//data.json 데이터는 state에 담기므로 상태에서 꺼내옴
// let tip = state.tip;
let todayWeather = 10 + 17;
let todayCondition = "흐림"
//return 구문 밖에서는 슬래시 두개 방식으로 주석
return ready ? <Loading/> : (
/*
return 구문 안에서는 {슬래시 + * 방식으로 주석
*/
<View>
{__DEV__ ? null : (<BannerAd
unitId={adUnitId}
size={BannerAdSize.FULL_BANNER}
requestOptions={{
requestNonPersonalizedAdsOnly: true,
}}
/>)}
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
<StatusBar style="dark" />
{/* <Text style={styles.title}>나만의 꿀팁</Text> */}
<Text style={styles.weather}>오늘의 날씨: {weather.temp + '°C ' + weather.condition} </Text>
<TouchableOpacity style={styles.aboutButton} onPress={()=>{navigation.navigate('AboutPage')}}>
<Text style={styles.aboutButtonText}>가열차게 달려온 나에게</Text>
</TouchableOpacity>
<Image style={styles.mainImage} source={{uri:main}}/>
<ScrollView style={styles.middleContainer} horizontal indicatorStyle={"white"}>
<TouchableOpacity style={styles.middleButtonAll} onPress={()=>{category('전체보기')}}><Text style={styles.middleButtonTextAll}>전체보기</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton01} onPress={()=>{category('성장')}}><Text style={styles.middleButtonText}>성장</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton02} onPress={()=>{category('사랑')}}><Text style={styles.middleButtonText}>사랑</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton03} onPress={()=>{category('인생')}}><Text style={styles.middleButtonText}>인생</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton04} onPress={()=>{category('감사')}}><Text style={styles.middleButtonText}>감사</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton05} onPress={()=>{category('지혜')}}><Text style={styles.middleButtonText}>지혜</Text></TouchableOpacity>
<TouchableOpacity style={styles.middleButton06} onPress={()=>{navigation.navigate('LikePage')}}><Text style={styles.middleButtonText}>저장</Text></TouchableOpacity>
</ScrollView>
<View style={styles.cardContainer}>
{/* 하나의 카드 영역을 나타내는 View */}
{
cateState.map((content,i)=>{
return __DEV__ ? (<Card content={content} key={i} navigation={navigation}/>) : (<AdCard content={content} key={i} navigation={navigation}/>)
})
}
</View>
</ScrollView>
</SafeAreaView>
</View>
)
}
const styles = StyleSheet.create({
container: {
//앱의 배경 색
backgroundColor: "#fff"
},
title: {
//폰트 사이즈
fontSize: 20,
//폰트 두께
fontWeight: '700',
//위 공간으로 부터 이격
marginTop:50,
//왼쪽 공간으로 부터 이격
marginLeft:20
},
weather:{
alignSelf:"flex-end",
paddingRight:20
},
mainImage: {
//컨텐츠의 넓이 값
width:'90%',
//컨텐츠의 높이 값
height:250,
//컨텐츠의 모서리 구부리기
borderRadius:10,
marginTop:20,
//컨텐츠 자체가 앱에서 어떤 곳에 위치시킬지 결정(정렬기능)
//각 속성의 값들은 공식문서에 고대로~ 나와 있음
alignSelf:"center"
},
middleContainer:{
marginTop:20,
marginLeft:10,
height:60
},
middleButtonAll: {
width:100,
height:50,
padding:15,
backgroundColor:'#006633',
borderColor:"deeppink",
borderRadius:15,
margin:5
},
middleButton01: {
width:100,
height:50,
padding:15,
backgroundColor:"#3edcf7",
borderColor:"darkblue",
borderRadius:15,
margin:5
},
middleButton02: {
width:100,
height:50,
padding:15,
backgroundColor:"#ff99ff",
borderRadius:15,
margin:5
},
middleButton03: {
width:100,
height:50,
padding:15,
backgroundColor:"#00d832",
borderRadius:15,
margin:5
},
middleButton04: {
width:100,
height:50,
padding:15,
backgroundColor:"#ae80ff",
borderRadius:15,
margin:5
},
middleButton05: {
width:100,
height:50,
padding:15,
backgroundColor:"#fe8d6f",
borderRadius:15,
margin:5
},
middleButton06: {
width:100,
height:50,
padding:15,
backgroundColor:"purple",
borderRadius:15,
margin:5
},
middleButtonText: {
color:"#fff",
fontWeight:'700',
//텍스트의 현재 위치에서의 정렬
textAlign:"center"
},
middleButtonTextAll: {
color:"#fff",
fontWeight:'700',
//텍스트의 현재 위치에서의 정렬
textAlign:"center"
},
cardContainer: {
marginTop:10,
marginLeft:10
},
aboutButton: {
backgroundColor:"blue",
width:170,
height:40,
borderRadius:10,
alignSelf:"flex-end",
marginRight:20,
marginTop:10
},
aboutButtonText: {
color:"#fff",
textAlign:"center",
marginTop:10
}
});
에러 상태의 코드는 아닙니다만..;;
*어디를 어떻게 수정하면 될지 가르쳐주시면 좋겠습니다.
감사합니다^^
