Touchableopacity onpress를 누르면 슬라이더 박스가 나오게끔 만들고싶은데요,
오류는 안나는데 화면이 반영이 되질않네요! 어디에 뭘 넣어야 할까요?
import React,{component,useState,useEffect} from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView,} from 'react-native';
import { SliderBox } from "react-native-image-slider-box";
import * as Linking from 'expo-linking';
const images = [
"https://source.unsplash.com/1024x768/?water",
]
const linkList=[
"https://okky.kr/articles/860744",
"https://spartacodingclub.kr/",
]
const link = (index) => {
Linking.openURL(`${linkList[index]}`)
}
const imagesTwo = [
"https://source.unsplash.com/1024x768/?water",
"https://source.unsplash.com/1024x768/?water",
]
const linkListTwo=[
"https://reactnavigation.org/docs/bottom-tab-navigator/",
"https://okky.kr/articles/860744",
"https://spartacodingclub.kr/",
]
const linkTwo = (indexTwo) => {
Linking.openURL(`${linkListTwo[indexTwo]}`)
}
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 {
setTestDeviceIDAsync,
AdMobBanner,
AdMobInterstitial,
PublisherBanner,
AdMobRewarded
} from 'expo-ads-admob';
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)
console.log(tip)
});
// 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`
);
console.log(result)
const temp = result.data.main.temp;
const condition = result.data.weather[0].main
console.log(temp)
console.log(condition)
//오랜만에 복습해보는 객체 리터럴 방식으로 딕셔너리 구성하기!!
//잘 기억이 안난다면 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 구문 안에서는 {슬래시 + * 방식으로 주석
*/
<ScrollView style={styles.container}>
<StatusBar style="auto" />
{/* <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}>편의점 4개사 추석 연휴 택배 스케줄 변경 사항 UPDATE!</Text>
</TouchableOpacity>
<ScrollView style={styles.MajorContainer} horizontal indicatorStyle={"white"}>
<TouchableOpacity style={styles.MajorTwo} onPress={()=><SliderBox
images={images}
onCurrentImagePressed={index =>
console.warn(`images ${index} pressed ${linkTwo(index)}`)}
/>}>
<Text style={styles.MajorOneText}>SK</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.MajorTwo} onPress={()=><SliderBox
images={imagesTwo}
onCurrentImagePressed={indexTwo =>
console.warn(`images ${indexTwo} pressed ${linkTwo(indexTwo)}`)}
/>}>
<Text style={styles.MajorOneText}>GS</Text>
</TouchableOpacity>
