-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
268 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,15 @@ | ||
| import {NavigationContainer} from '@react-navigation/native'; | ||
| import {createNativeStackNavigator} from '@react-navigation/native-stack'; | ||
| import Home from 'screens/home/Home'; | ||
| import PassPort from 'screens/passport/PassPort'; | ||
| import NewTrash from 'screens/NewTrash'; | ||
| import NewTrashDetail from 'screens/NewTrashDetail'; | ||
| import ReportNewBin from 'screens/reportNewBin/ReportNewBin'; | ||
|
|
||
| export default function HomeNavigator() { | ||
| const Stack = createNativeStackNavigator<RootHomeParamList>(); | ||
| return ( | ||
| <Stack.Navigator initialRouteName="Home" screenOptions={{headerShown: false, gestureEnabled: true}}> | ||
| <Stack.Screen name="Home" component={Home} /> | ||
| <Stack.Screen name="PassPort" component={PassPort} /> | ||
| <Stack.Screen name="NewTrash" component={NewTrash} /> | ||
| <Stack.Screen name="NewTrashDetail" component={NewTrashDetail} /> | ||
| <Stack.Screen name="ReportNewBin" component={ReportNewBin} /> | ||
| </Stack.Navigator> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| import React, {useEffect, useRef, useState} from 'react'; | ||
| import {Platform, Alert, StyleSheet, View, Image, TouchableOpacity, Dimensions} from 'react-native'; | ||
| import {request, PERMISSIONS, RESULTS} from 'react-native-permissions'; | ||
| import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'; | ||
| import WebView from 'react-native-webview'; | ||
| import {mapStore} from 'store/Store'; | ||
|
|
||
| export default function ReportNewBin() { | ||
| const webViewRef = useRef<WebView>(null); | ||
| const {startWatchingPosition, stopWatchingPosition, setCurrentPosition, setCenterPosition} = mapStore(); | ||
| const [isWebViewLoaded, setIsWebViewLoaded] = useState<boolean>(false); // WebView 로드 상태 | ||
| const [bottomSheetOffset, setBottomSheetOffset] = useState<number>(0); // BottomSheet의 높이 또는 offset 상태 | ||
| const URL = 'https://binvoyage.netlify.app/reportNewBin'; | ||
| const alertShown = useRef(false); | ||
|
|
||
| const {width, height} = Dimensions.get('window'); | ||
| const refreshWrapperBottom = bottomSheetOffset > 0 ? bottomSheetOffset + 10 : 40; | ||
|
|
||
| const animatedStyle = useAnimatedStyle(() => { | ||
| return { | ||
| bottom: withTiming(refreshWrapperBottom, {duration: 300}), // 애니메이션 추가 | ||
| }; | ||
| }, [refreshWrapperBottom]); | ||
|
|
||
| const requestPermissionAndSendLocation = async () => { | ||
| let result; | ||
| if (Platform.OS === 'android') { | ||
| result = await request(PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION); | ||
| } else if (Platform.OS === 'ios') { | ||
| result = await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE); | ||
| } | ||
|
|
||
| if (result === RESULTS.GRANTED) { | ||
| startWatchingPosition(position => { | ||
| const message = { | ||
| type: 'location', | ||
| payload: { | ||
| latitude: position.latitude, | ||
| longitude: position.longitude, | ||
| }, | ||
| }; | ||
| console.log('Sending message to WebView:', JSON.stringify(message)); | ||
| if (isWebViewLoaded && webViewRef.current) { | ||
| webViewRef.current?.postMessage(JSON.stringify(message)); | ||
| // setTimeout(() => { | ||
| // webViewRef.current?.postMessage(JSON.stringify(message)); | ||
| // }, 500); // 0.5초 지연 | ||
| } | ||
| }); | ||
| } else { | ||
| if (!alertShown.current) { | ||
| // alertShown이라는 ref 변수를 사용해 두 번 호출 방지 | ||
| Alert.alert( | ||
| 'Location Permission Needed', | ||
| 'We need your location permission to provide information about nearby bins. Please enable location permissions in Settings.', | ||
| ); | ||
| alertShown.current = true; | ||
| } | ||
| const message = { | ||
| type: 'location', | ||
| payload: { | ||
| latitude: undefined, | ||
| longitude: undefined, | ||
| }, | ||
| }; | ||
| console.log('Sending message to WebView:', JSON.stringify(message)); | ||
| if (isWebViewLoaded && webViewRef.current) { | ||
| setTimeout(() => { | ||
| webViewRef.current?.postMessage(JSON.stringify(message)); | ||
| }, 500); // 0.5초 지연 | ||
| } | ||
| setCurrentPosition({ | ||
| latitude: 37.571648599, | ||
| longitude: 126.976372775, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (isWebViewLoaded) { | ||
| requestPermissionAndSendLocation(); | ||
| } | ||
|
|
||
| return () => { | ||
| stopWatchingPosition(); // 컴포넌트가 언마운트될 때만 위치 추적을 중지 | ||
| }; | ||
| }, [isWebViewLoaded]); | ||
|
|
||
| const refreshLocationWatching = () => { | ||
| // 기존의 위치 감시 중지 | ||
| // if (watcherId !== null) { | ||
| // Geolocation.clearWatch(watcherId); | ||
| // } | ||
| // // 새로 위치 감시 시작 | ||
| // requestPermissionAndSendLocation(); | ||
|
|
||
| if (webViewRef.current) { | ||
| const message = { | ||
| type: 'refresh', | ||
| }; | ||
| // 메시지가 잘 전송되었는지 확인하기 위한 로그 | ||
| console.log('Sending message to WebView:', JSON.stringify(message)); | ||
|
|
||
| webViewRef.current.postMessage(JSON.stringify(message)); | ||
| } else { | ||
| // WebView ref가 null일 때의 로그 | ||
| console.log('WebView reference is null, message not sent.'); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <View style={styles.container}> | ||
| <WebView | ||
| ref={webViewRef} | ||
| style={styles.webview} | ||
| source={{uri: URL}} | ||
| javaScriptEnabled={true} | ||
| domStorageEnabled={true} // DOM 저장소 사용 | ||
| cacheMode={'LOAD_CACHE_ELSE_NETWORK'} // 캐시 우선 로딩 | ||
| // onMessage={handleMessage} | ||
| onLoadStart={() => setIsWebViewLoaded(false)} // 로딩 시작 | ||
| onLoadEnd={() => setIsWebViewLoaded(true)} // 로딩 완료/> | ||
| /> | ||
| <Animated.View style={[styles.refresh, animatedStyle]}> | ||
| <TouchableOpacity onPress={refreshLocationWatching}> | ||
| <Image source={require('assets/images/icon-refresh.png')} style={{width: 60, height: 60}} /> | ||
| </TouchableOpacity> | ||
| </Animated.View> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| }, | ||
| webview: { | ||
| flex: 1, | ||
| }, | ||
| View: { | ||
| flex: 1, | ||
| }, | ||
| refresh: { | ||
| position: 'absolute', | ||
| right: 16, | ||
| width: 60, | ||
| height: 60, | ||
| }, | ||
| search: { | ||
| display: 'none', | ||
| position: 'absolute', | ||
| alignSelf: 'center', | ||
| }, | ||
| visible: { | ||
| display: 'flex', | ||
| }, | ||
| loadingContainer: { | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| right: 0, | ||
| bottom: 0, | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| backgroundColor: 'rgba(255, 255, 255, 0.5)', // 로딩 중 배경을 반투명하게 설정 | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.