kimWooBin/reactNative_TMS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navigation 타이틀 수정 및 로그아웃 기능 구현

Browse Source
This commit is contained in:
kimwoobin
2024-12-10 15:36:53 +09:00
parent 9af69a1256
commit e25015c6ee
5 changed files with 103 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
rnTMS-front/src/pages/navigation/AppNavigator.js
View File

@ -1,29 +1,112 @@
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
// import { useRef } from 'react';
import { StyleSheet,View,Text,Image,TouchableOpacity } from 'react-native'
import { NavigationContainer,CommonActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { StatusBar } from 'expo-status-bar';
import Feather from '@expo/vector-icons/Feather';
import login from '../screens/Login'
import testScreen from '../screens/TestScreen'
import testDetailScreen from '../screens/TestDetailScreen'
const Stack = createStackNavigator();
import { useSelector,useDispatch } from 'react-redux';
import { clearData } from 'redux/reducers/storeSlice'
function AppNavigator(){
const store = useSelector(state => state.store)
console.log('store ', store)
const Stack = createStackNavigator();
const dispatch = useDispatch()
//헤더 변경
function StackHeader(props) {
return(
<View style={styles.titleBoder} >
<Text style={{ color: '#fff' ,fontSize: 15}}>
{store.userName}
</Text>
<Text style={{ color: '#fff' ,fontSize: 20}}>
{props.children}
</Text>
</View>
)
}
const logOut = (navigation) => {
dispatch(clearData())
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [{ name: 'Login'}]
})
)
}
return(
<NavigationContainer>
<NavigationContainer >
<Stack.Navigator initialRouteName="Login">
<Stack.Screen name="Login" component={login} />
<Stack.Screen name="Test" component={testScreen} options={{title: '목록 화면'}} />
<Stack.Screen name="TestDetail" component={testDetailScreen} options={{title: '상세 화면'}}/>
<Stack.Screen name="Test"
component={testScreen}
options={({ navigation }) => ({
title: '목록 화면',
headerStyle: { backgroundColor: '#009688' } ,
headerTitleAlign: 'center',
// headerLeft: () => {(<Text></Text>)},
headerTitle: (props) => <StackHeader {...props}/>,
headerRight: () => (
<TouchableOpacity onPress={() => logOut(navigation)}>
<Feather name="log-out" size={24} color="black" style={{marginRight: 10}}/>
</TouchableOpacity>),
})}
/>
<Stack.Screen name="TestDetail"
component={testDetailScreen}
options={({ navigation }) => ({
title: '상세 화면',
headerStyle: { backgroundColor: '#009688' } ,
headerTitleAlign: 'center',
// headerLeft: () => {(<Text></Text>)},
headerTitle: (props) => <StackHeader {...props}/> ,
headerRight: () => (
<TouchableOpacity onPress={() => logOut(navigation)}>
<Feather name="log-out" size={24} color="black" style={{marginRight: 10}}/>
</TouchableOpacity>),
})}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default AppNavigator;
export default AppNavigator;
const styles = StyleSheet.create({
itemContainer: {
marginVertical: 5,
marginHorizontal: 10,
padding:10,
backgroundColor: '#fff',
borderColor: '#ccc',
borderStyle: 'solid',
borderWidth: 0.5
},
titleContextItem: {
display: 'flex'
},
itemText: {
fontSize: 18,
},
title1: {
backgroundColor: '#ffffff00'
},
titleBoder:{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
})

27
rnTMS-front/src/pages/screens/testDetailScreen.js
View File

@ -25,12 +25,12 @@ export default function TestDetailScreen({route, navigation }) {
async function setLoc() {
const { granted } = await Location.requestForegroundPermissionsAsync();
console.log('granted ', granted)
// console.log('granted ', granted)
if(!granted) {
return;
}
const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync({accuracy: 5});
console.log('longitude ', longitude)
// console.log('longitude ', longitude)
await postMessage({'lat': longitude} )
}
@ -52,10 +52,7 @@ export default function TestDetailScreen({route, navigation }) {
// })
}
/**
/**
* button evt START
*/
function btnEvt() {
@ -72,11 +69,10 @@ export default function TestDetailScreen({route, navigation }) {
return;
}
const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync({accuracy: 5});
const location = await Location.reverseGeocodeAsync({ latitude, longitude }, {useGoogleMaps: false})
console.log('location ::: ', location)
// console.log('location ::: ', location)
let currentLocation = Location.getCurrentPositionAsync();
console.log('currentLocation ', currentLocation)
// console.log('currentLocation ', currentLocation)
await postMessage({type: String, data: 'test'})
}
@ -140,38 +136,25 @@ export default function TestDetailScreen({route, navigation }) {
const styles = StyleSheet.create({
div1:{
flex: 1,
// backgroundColor: 'red',
width:'100%',
height:'15%',
// marginVertical: 30
// alignItems: 'center',
// justifyContent: 'center'
},
div2:{
flex: 2,
// backgroundColor: 'blue',
width:'100%',
height:'40%'
},
div3:{
flex: 2,
// backgroundColor: 'green',
width:'100%',
height:'35%'
},
div4:{
flex: 0.5,
// backgroundColor: 'yellow',
width:'100%',
height:'10%'
},
itemContainer1: {
// alignItems: 'center',
// justifyContent:'center',
// margin: 40,
// marginVertical: 5,
// marginHorizontal: 10,
// padding:10,
backgroundColor: '#fff',
borderColor: '#ccc',
borderStyle: 'solid',

3
rnTMS-front/src/pages/screens/testScreen.js
View File

@ -50,9 +50,6 @@ export default function TestScreen({ navigation }){
return (
<View>
<Button title="조회"
onPress={ () => btnEvt() }>
</Button>
<FlatList
data={listData}
renderItem={renderItem}

2
rnTMS-front/src/pages/screens/tmap/tmap.html
View File

@ -23,7 +23,7 @@
alert(event.data.lat)
// console.log(event)
const { type, data } = JSON.parse(event.data);
// alert(`Received from React Native: ${data.data}`);
alert(`Received from React Native: ${data.data}`);
alert('data ', data)
const handler = receiveWebviewMessageMap.get(type);
handler?.(data);

3
rnTMS-front/src/redux/reducers/storeSlice.js
View File

@ -22,6 +22,7 @@ const storeSlice = createSlice({
state.useYn = action.payload.userInfo.useYn;
state.auth = action.payload.userInfo.authorities;
},
//로그아웃 . 계정정보 제거
clearData: (state)=> {
state.token = ''
state.userId = ''
@ -33,5 +34,5 @@ const storeSlice = createSlice({
}
});
export const { setData } = storeSlice.actions;
export const { setData,clearData } = storeSlice.actions;
export default storeSlice.reducer;