Merge pull request #4 from WeConnection/dev-onting

React Navigation 적용

App.js

@@ -1,91 +1,62 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import { StyleSheet, View, Text, TouchableHighlight } from 'react-native';
 import { Entypo, Octicons, AntDesign } from '@expo/vector-icons';
 import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import LoginView from './compo/loginview';
 import FeedView from './compo/feedview';
 import OrgView from './compo/orgview';
 import NoticeView from './compo/noticeview';
 import ProfileView from './compo/profileview';
 
-const MainView = () => {
- const [state, setState] = React.useState('feed');
- const target = {feed: <FeedView />, org: <OrgView />, notice: <NoticeView />, profile: <ProfileView />}[state];
- const title = {feed: '피드', org: '단체', notice: '알림', profile: '내정보'}[state];
+const Tab = createBottomTabNavigator();
 
- return(
- <View style={{
- flex: 1,
- flexDirection: 'column',
- }}>
- <View style={{
- flex: 1,
- flexDirection: 'column',
- backgroundColor: 'cornsilk',
- }}>
- <View style={{
- paddingHorizontal: 30,
- paddingVertical: 20,
- backgroundColor: 'white'
- }}>
- <Text style={{
- fontSize: 30,
- }}>
- {title}
- </Text>
- </View>
- {target}
- </View>
- <View style={{
- flexDirection: 'row',
- justifyContent: 'space-around',
- paddingVertical: 5,
- paddingHorizontal: 20,
- backgroundColor: 'darkseagreen',
- }}>
- <TouchableHighlight onPress={() => setState('feed')}>
- <Entypo style={styles.icon} name='news' size={36} color='black' />
- </TouchableHighlight>
- <TouchableHighlight onPress={() => setState('org')}>
- <Octicons style={styles.icon} name='organization' size={36} color='black' />
- </TouchableHighlight>
- <TouchableHighlight onPress={() => setState('notice')}>
- <Entypo style={styles.icon} name='notification' size={36} color='black' />
- </TouchableHighlight>
- <TouchableHighlight onPress={() => setState('profile')}>
- <AntDesign style={styles.icon} name='profile' size={36} color='black' />
- </TouchableHighlight>
- </View>
- </View>
+const MainView = () => {
+ return (
+ <Tab.Navigator
+ screenOptions={({ route }) => ({
+ tabBarIcon: ({ color, size }) => {
+ return {Feed: <Entypo name='news' size={size} color={color} />,
+ Org: <Octicons name='organization' size={size} color={color} />,
+ Notice: <Entypo name='notification' size={size} color={color} />,
+ Profile: <AntDesign name='profile' size={size} color={color} />}[route.name];
+ },
+ })}
+ tabBarOptions={{
+ activeTintColor: 'tomato',
+ inactiveTintColor: 'gray',
+ }}
+ >
+ <Tab.Screen name="Feed" component={FeedView} />
+ <Tab.Screen name="Org" component={OrgView} />
+ <Tab.Screen name="Notice" component={NoticeView} />
+ <Tab.Screen name="Profile" component={ProfileView} />
+ </Tab.Navigator>
  );
 };
 
+const Stack = createStackNavigator();
+
 export default function App() {
- const [logined, setLogin] = React.useState(true);
+ const [logined, setLogin] = React.useState(false);
  const loginCheck = () => {
  AsyncStorage.getItem('username')
- .then((username) => {setLogin(Boolean(username))});
+ .then((username) => {
+ setLogin(Boolean(username));
+ });
  };
 
  loginCheck();
 
  return (
  <NavigationContainer>
- {logined ? <MainView /> : <LoginView onLogin={loginCheck} />}
+ <Stack.Navigator initialRouteName={logined ? "Main" : "Login"}>
+ <Stack.Screen name="Login" component={LoginView} />
+ <Stack.Screen name="Main" component={MainView} />
+ </Stack.Navigator>
  <StatusBar style="auto" />
  </NavigationContainer>
  );
 }
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- },
- icon: {
- paddingHorizontal: 20,
- paddingVertical: 4,
- }
-});

compo/loginview.js

@@ -5,17 +5,15 @@ import {hostaddr} from '../config'
 import * as SecureStore from 'expo-secure-store';
 
 
-export default function LoginView(props) {
+export default function LoginView({navigation}) {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
 
  const login = async() => {
- // props.onLogin();/
-
  try{
- let loginHeaders = new Headers();
+ const loginHeaders = new Headers();
  loginHeaders.append('Content-Type', 'application/json');
- let res = await fetch(hostaddr + '/user/login', {
+ const res = await fetch(hostaddr + '/user/login', {
  method: 'POST',
  headers: loginHeaders,
  body: JSON.stringify({
@@ -24,9 +22,11 @@ export default function LoginView(props) {
  })
  });
  if(!res.ok){
+ const msg = await res.text();
+
  Alert.alert(
  '로그인 실패',
- '아이디와 비밀번호를 확인해주세요',
+ msg,
  [
  {
  text: '닫기',
@@ -39,6 +39,10 @@ export default function LoginView(props) {
  else{
  await AsyncStorage.setItem('username', username);
  await SecureStore.setItemAsync("session", res.headers.get("Set-Cookie"))
+ navigation.reset({
+ index: 0,
+ routes: [{name: 'Main'}],
+ })
  }
  }catch(err){
  Alert.alert(
@@ -116,8 +120,6 @@ const styles = StyleSheet.create({
  flex: 1,
  alignSelf: 'center',
  flexDirection: 'column',
- width: 200,
- backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'space-between',
  },

config.js

@@ -1,3 +1,3 @@
-const hostaddr = 'http:https://127.0.0.1:5000';
+const hostaddr = 'http:https://ec2-3-129-59-191.us-east-2.compute.amazonaws.com:5000';
 
 export {hostaddr};

package.json

@@ -12,6 +12,7 @@
  "@react-native-community/masked-view": "0.1.10",
  "@react-navigation/bottom-tabs": "^5.7.3",
  "@react-navigation/native": "^5.7.2",
+ "@react-navigation/stack": "^5.9.0",
  "expo": "~38.0.8",
  "expo-secure-store": "~9.0.1",
  "expo-status-bar": "^1.0.2",

yarn.lock

@@ -1262,6 +1262,14 @@
  dependencies:
  nanoid "^3.1.9"
 
+"@react-navigation/stack@^5.9.0":
+ version "5.9.0"
+ resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.9.0.tgz#bf24607175bf502798cc4c832aa8a86e55f3b365"
+ integrity sha512-kt6M0ZLMyNKXfKi50n01bHg4/d8zp0Yh5QaQG4d1roWOqdV9ou1nFEK4l2yQ6XKH2lLSYswHElPDZUuWd+6XzA==
+ dependencies:
+ color "^3.1.2"
+ react-native-iphone-x-helper "^1.2.1"
+
 "@types/color-name@^1.1.1":
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"