1. Activity Screen UI 작성하기

컴포넌트 4개 만들기

Database.js 코드 추가

아래 코드 전체 넣기

// Friends Profile Data
export const FriendsProfileData = [
    {
        name: 'react',
        accountName: 'React',
        profileImage: require('../../assets/images/profile4.jpeg'),
        posts: 30,
        followers: 31,
        following: 44,
        follow: false,
    },
    {
        name: 'javascript',
        accountName: 'Javascript',
        profileImage: require('../../assets/images/profile5.jpeg'),
        posts: 24,
        followers: 120,
        following: 600,
        follow: false,
    },
    {
        name: 'vue',
        accountName: 'Vue',
        profileImage: require('../../assets/images/profile2.jpeg'),
        posts: 21,
        followers: 7886,
        following: 32,
        follow: false,
    },
    {
        name: 'angular',
        accountName: 'Angular',
        profileImage: require('../../assets/images/post1.jpeg'),
        posts: 123,
        followers: 64253,
        following: 32,
        follow: false,
    },
    {
        name: 'svelt',
        accountName: 'Svelt',
        profileImage: require('../../assets/images/post2.jpeg'),
        posts: 56,
        followers: 6542,
        following: 43,
        follow: false,
    },
    {
        name: 'go',
        accountName: 'Go',
        profileImage: require('../../assets/images/post3.jpeg'),
        posts: 452,
        followers: '564k',
        following: 31,
        follow: false,
    },
    {
        name: 'nextjs',
        accountName: 'NextJS',
        profileImage: require('../../assets/images/post4.jpeg'),
        posts: 543,
        followers: '435k',
        following: 22,
        follow: false,
    },
    {
        name: 'expressjs',
        accountName: 'ExpressJS',
        profileImage: require('../../assets/images/post5.jpeg'),
        posts: 234,
        followers: '763k',
        following: 332,
        follow: false,
    },
    {
        name: 'java',
        accountName: 'Java',
        profileImage: require('../../assets/images/post6.jpeg'),
        posts: 111,
        followers: 11223,
        following: 1,
        follow: false,
    },
    {
        name: 'deno',
        accountName: 'Deno',
        profileImage: require('../../assets/images/post7.jpeg'),
        posts: 121,
        followers: 43213,
        following: 21,
        follow: false,
    },
    {
        name: 'nodejs',
        accountName: 'NodeJS',
        profileImage: require('../../assets/images/post8.jpeg'),
        posts: 432,
        followers: '987k',
        following: 24,
        follow: false,
    },
    {
        name: 'python',
        accountName: 'Python',
        profileImage: require('../../assets/images/post9.jpeg'),
        posts: '1.2k',
        followers: '1.2M',
        following: 12,
        follow: false,
    },
    {
        name: 'jquery',
        accountName: 'JQuery',
        profileImage: require('../../assets/images/post10.jpeg'),
        posts: 533,
        followers: 64322,
        following: 123,
        follow: false,
    },
];

Activity.js UI 작성하기

import {Text, SafeAreaView, ScrollView} from 'react-native';
import React from 'react';
import ActivityThisWeek from '../components/ActivityThisWeek';
import ActivityPrevious from '../components/ActivityPrevious';
import {FriendsProfileData} from '../components/Database';
import ActivityRecommend from '../components/ActivityRecommend';

const Activity = () => {
  return (
    <SafeAreaView style={{width: '100%', backgroundColor: 'white'}}>
      <Text
        style={{
          fontSize: 20,
          fontWeight: 'bold',
          borderBottomWidth: 0.5,
          borderBottomColor: '#DEDEDE',
          padding: 10,
        }}>
        활동
      </Text>
      <ScrollView style={{margin: 10}} showsVerticalScrollIndicator={false}>
        <ActivityThisWeek />
        <Text style={{fontWeight: 'bold'}}>이전 활동</Text>
        {FriendsProfileData.slice(3, 6).map((data, index) => (
          <ActivityPrevious data={data} key={index} />
        ))}

        <Text style={{fontWeight: 'bold', paddingVertical: 10}}>
          회원님을 위한 추천
        </Text>
        {FriendsProfileData.slice(6, 12).map((data, index) => (
          <ActivityRecommend data={data} key={index} />
        ))}
      </ScrollView>
    </SafeAreaView>
  );
};

export default Activity;

2. ActivityThisWeek UI 작성하기

command + R (리프레시하기)

import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import React from 'react';
import {FriendsProfileData} from './Database';
import {useNavigation} from '@react-navigation/native';

const ActivityThisWeek = () => {
  const navigation = useNavigation();
  return (
    <>
      <Text style={{fontWeight: 'bold'}}>이번 주</Text>
      <View style={{flexDirection: 'row', paddingVertical: 10}}>
        {FriendsProfileData.slice(0, 3).map((data, index) => {
          return (
            <TouchableOpacity
              onPress={() =>
                navigation.push('FriendProfile', {
                  name: data.name,
                  profileImage: data.profileImage,
                  follow: data.follow,
                  post: data.posts,
                  followers: data.followers,
                  following: data.following,
                })
              }
              key={index}>
              <Text>{data.name} </Text>
            </TouchableOpacity>
          );
        })}
        <Text>님이 팔로우 하기 시작했습니다.</Text>
      </View>
    </>
  );
};

export default ActivityThisWeek;

const styles = StyleSheet.create({});

3. ActivityPrevious 컴포넌트 작성하기

import {StyleSheet, Text, TouchableOpacity, View, Image} from 'react-native';
import React, {useState} from 'react';
import {useNavigation} from '@react-navigation/native';

const ActivityPrevious = ({data}) => {
  const navigation = useNavigation();
  const [follow, setFollow] = useState(data.follow);
  return (
    <View style={{width: '100%'}}>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          paddingVertical: 20,
          width: '100%',
        }}>
        <TouchableOpacity
          onPress={() =>
            navigation.push('FriendProfile', {
              name: data.name,
              profileImage: data.profileImage,
              follow: follow,
              post: data.posts,
              followers: data.followers,
              following: data.following,
            })
          }
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            maxWidth: '64%',
          }}>
          <Image
            source={data.profileImage}
            style={{
              width: 45,
              height: 45,
              borderRadius: 100,
              marginRight: 10,
            }}
          />
          <Text style={{fontSize: 15}}>
            <Text style={{fontWeight: 'bold'}}>{data.name}</Text> 의 사진 및
            동영상을 보려면 팔로우 하세요.
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => setFollow(!follow)}
          style={{width: follow ? 72 : 68}}>
          <View
            style={{
              width: '100%',
              height: 30,
              borderRadius: 5,
              backgroundColor: follow ? null : '#3493D9',
              borderWidth: follow ? 1 : 0,
              borderColor: follow ? '#DEDEDE' : null,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{color: follow ? 'black' : 'white'}}>
              {follow ? 'Following' : 'Follow'}
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default ActivityPrevious;

const styles = StyleSheet.create({});

4. ActivityRecommend.js 코드 작성하기

import {StyleSheet, Image, TouchableOpacity, View, Text} from 'react-native';
import React, {useState} from 'react';
import {useNavigation} from '@react-navigation/native';
import AntDesign from 'react-native-vector-icons/AntDesign';

const ActivityRecommend = ({data}) => {
  const navigation = useNavigation();
  const [follow, setFollow] = useState(data.follow);
  const [close, setClose] = useState(false);
  return (
    <View>
      {close ? null : (
        <View
          style={{
            paddingVertical: 10,
            flexDirection: 'row',
            width: '100%',
            justifyContent: 'space-between',
          }}>
          <View>
            <TouchableOpacity
              onPress={() =>
                navigation.push('FriendProfile', {
                  name: data.name,
                  profileImage: data.profileImage,
                  follow: follow,
                  post: data.posts,
                  followers: data.followers,
                  following: data.following,
                })
              }
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                maxWidth: '64%',
              }}>
              <Image
                source={data.profileImage}
                style={{
                  width: 45,
                  height: 45,
                  borderRadius: 100,
                  marginRight: 10,
                }}
              />
              <View style={{width: '100%'}}>
                <Text style={{fontSize: 14, fontWeight: 'bold'}}>
                  {data.name}
                </Text>
                <Text style={{fontSize: 12, opacity: 0.5}}>
                  {data.accountName}
                </Text>
                <Text style={{fontSize: 12, opacity: 0.5}}>
                  회원님을 위한 추천
                </Text>
              </View>
            </TouchableOpacity>
          </View>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            {follow ? (
              <TouchableOpacity
                onPress={() => setFollow(!follow)}
                style={{width: follow ? 90 : 68}}>
                <View
                  style={{
                    width: '100%',
                    height: 30,
                    borderRadius: 5,
                    backgroundColor: follow ? null : '#3493D9',
                    borderWidth: follow ? 1 : 0,
                    borderColor: '#DEDEDE',
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <Text style={{color: follow ? 'black' : 'white'}}>
                    {follow ? 'following' : 'follow'}
                  </Text>
                </View>
              </TouchableOpacity>
            ) : (
              <>
                <TouchableOpacity
                  onPress={() => setFollow(!follow)}
                  style={{width: follow ? 90 : 68}}>
                  <View
                    style={{
                      width: '100%',
                      height: 30,
                      borderRadius: 5,
                      backgroundColor: follow ? null : '#3493D9',
                      borderWidth: follow ? 1 : 0,
                      borderColor: '#DEDEDE',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}>
                    <Text style={{color: follow ? 'black' : 'white'}}>
                      {follow ? 'following' : 'follow'}
                    </Text>
                  </View>
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={() => setClose(true)}
                  style={{paddingHorizontal: 10}}>
                  <AntDesign
                    name="close"
                    style={{
                      fontSize: 14,
                      color: 'black',
                      opacity: 0.8,
                    }}
                  />
                </TouchableOpacity>
              </>
            )}
          </View>
        </View>
      )}
    </View>
  );
};

export default ActivityRecommend;