Merge pull request #7 from WeConnection/dev-onting

MainView, OrgView 수정
WeConnection · Aug 15, 2020 · 095a890 · 095a890
2 parents ccf8477 + dea655e
commit 095a890
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 44 deletions.
diff --git a/App.js b/App.js
@@ -1,6 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import { StatusBar } from 'expo-status-bar';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Entypo, Octicons, AntDesign } from '@expo/vector-icons';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
@@ -13,7 +14,7 @@ import ProfileView from './compo/profileview';
 
 const Tab = createBottomTabNavigator();
 
-const MainView = () => {
+const MainView = ({navigation}) => {
  return (
  <Tab.Navigator
  screenOptions={({ route }) => ({
@@ -48,15 +49,19 @@ export default function App() {
  setLogin(Boolean(username));
  };
 
- loginCheck();
+ useEffect(() => {
+ loginCheck();
+ }, []);
 
  return (
- <NavigationContainer>
- <Stack.Navigator initialRouteName={logined ? "Main" : "Login"}>
- <Stack.Screen name="Login" component={LoginView} />
- <Stack.Screen name="Main" component={MainView} />
- </Stack.Navigator>
- <StatusBar style="auto" />
- </NavigationContainer>
+ <SafeAreaProvider>
+ <NavigationContainer>
+ <Stack.Navigator initialRouteName={logined ? "Main" : "Login"}>
+ <Stack.Screen name="Login" component={LoginView} />
+ <Stack.Screen name="Main" component={MainView} />
+ </Stack.Navigator>
+ <StatusBar style="auto" />
+ </NavigationContainer>
+ </SafeAreaProvider>
  );
 }
diff --git a/compo/loginview.js b/compo/loginview.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { StyleSheet, Text, View, TextInput, Button, TouchableHighlight, Alert } from 'react-native';
 import {hostaddr} from '../config'
 import * as SecureStore from 'expo-secure-store';
+import {SafeAreaView} from 'react-native-safe-area-context';
 
 
 export default function LoginView({navigation}) {
@@ -61,7 +62,7 @@ export default function LoginView({navigation}) {
  }
 
  return (
- <View style={styles.container}>
+ <SafeAreaView style={styles.container}>
  <View style={{
  width: 200,
  marginVertical: 100,
@@ -111,7 +112,7 @@ export default function LoginView({navigation}) {
  </Text>
  </TouchableHighlight>
  </View>
- </View>
+ </SafeAreaView>
  );
 }
 

diff --git a/compo/orgview.js b/compo/orgview.js
@@ -1,28 +1,98 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import React, {useState, useEffect} from 'react';
-import { FlatList, Text, View, Image, TouchableHighlight, useWindowDimensions, Alert } from 'react-native';
+import { ActivityIndicator, FlatList, Text, View, Image, TouchableHighlight, useWindowDimensions, Alert } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { createStackNavigator } from '@react-navigation/stack';
 import {hostaddr} from '../config'
 
+const Loading = () => {
+ return (
+ <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
+ <ActivityIndicator size={100} />
+ </SafeAreaView>
+ );
+};
+
 const OrgIcon = (props) => {
  return (
  <View style={props.style}>
- <TouchableHighlight>
- <Image source={props.imageURL ? {uri: hostaddr + props.imageURL} : require('../assets/favicon.png')} style={{
+ <Image source={props.imageURL ? {uri: hostaddr + props.imageURL} : require('../assets/favicon.png')} 
+ style={{
  height: 60,
  width: 60,
  resizeMode: 'cover',
- }} />
- </TouchableHighlight>
- <Text>
+ }}
+ />
+ <Text style={{
+ fontSize: 18,
+ marginVertical: 5,
+ }}>
  {props.name}
  </Text>
+ <Text style={{
+ fontSize: 14,
+ marginVertical: 5,
+ }}
+ numberOfLines={5}
+ >
+ {props.desc}
+ </Text>
  </View>
  );
 }
 
-const OrgView = () => {
+const OrgDetail = ({navigation, route}) => {
+ return (
+ <SafeAreaView>
+ <Text>{route.params.id}</Text>
+ </SafeAreaView>
+ );
+};
+
+const Stack = createStackNavigator();
+
+const Home = ({navigation, route}) => {
  const width = useWindowDimensions().width;
- const fit = parseInt(width / 120);
+ const fit = parseInt(width / 200);
+
+ const orgs = route.params.orgs;
+
+ return (
+ <View style={{
+ flex: 1,
+ alignItems: 'center',
+ }}> 
+ <FlatList 
+ data={orgs}
+ renderItem={({item}) => 
+ (<TouchableHighlight onPress={() => 
+ navigation.navigate(item.id, {
+ ...item
+ })}>
+ <OrgIcon 
+ name={item.name}
+ desc={item.desc}
+ style={{
+ flex: 1,
+ alignItems: 'center',
+ height: 260,
+ width: 180,
+ paddingVertical: 30,
+ paddingHorizontal: 20,
+ marginHorizontal: 10,
+ marginVertical: 10,
+ backgroundColor: 'white',
+ }}
+ imageURL={item.imageURL}
+ />
+ </TouchableHighlight>)}
+ numColumns={fit}
+ />
+ </View>
+ );
+};
+
+const OrgView = ({navigation}) => {
  const [orgs, setOrgs] = useState([]);
  const [loading, setLoading] = useState(true);
 
@@ -47,37 +117,27 @@ const OrgView = () => {
  ],
  {cancelable: false},
  );
- AsyncStorage.setItem('username', '');
+ AsyncStorage.setItem('username', '')
+ .then(() => navigation.reset({
+ index: 0,
+ routes: [{name: 'Login'}],
+ }));
  })
  .finally(() => {
  setLoading(false);
  });
  }, []);
 
  return (
- <View style={{
- flex: 1,
- alignItems: 'center',
- marginHorizontal: 20,
- marginVertical: 10,
- }}>
- {loading ? <Text>로딩중</Text> : 
- <FlatList 
- data={orgs}
- renderItem={({item}) => 
- <OrgIcon 
- name={item.name}
- style={{
- alignItems: 'center',
- marginVertical: 10,
- marginHorizontal: 20,
- }}
- imageURL={item.imageURL}
- />}
- numColumns={fit}
- />}
- </View>
+ loading ? <Loading /> : 
+ <Stack.Navigator>
+ <Stack.Screen name="Home" 
+ component={Home}
+ initialParams={{orgs: orgs}}
+ />
+ {orgs.map((item) => <Stack.Screen name={item.id} component={OrgDetail} key={item.id} />)}
+ </Stack.Navigator>
  );
-};
+}
 
 export default OrgView;