OrgView 수정

WeConnection · Aug 15, 2020 · dea655e · dea655e
1 parent 26795f1
commit dea655e
Showing 1 changed file with 92 additions and 32 deletions.
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;