by: testuserPosted on:

배너/FlmBanner

🌏 스크린샷/ScreenShot
구글드라이브/Google Drive :
https://drive.google.com/drive/folders/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link

1.react-native-freelifemakers-ui NPM 모듈 설치하기 / react-native-freelifemakers-ui NPM Module Install

# npm install react-native-freelifemakers-ui

2.의존성 모듈 설치 / peerModule install

— FlmBottomSheet를 사용하기 위해서 반드시 설치해야 하는 모듈입니다.
This is a module that must be installed to use FlmBottomSheet.

1)React-Native Expo

— react-native-freelifemakers-ui 이 모듈을 사용하기 위해서는 아래 두개의 모듈을 반드시 설치해야 합니다.
To use this module, you must install the following two modules: react-native-freelifemakers-ui

— 리액트 네이티브 엑스포는 반드시 react-native-reanimated@3.17.4 버전을 설치 합니다.
React Native Expo requires react-native-reanimated@3.17.4 to be installed.

— 엑스포 프로젝트와 3.17.4버전이 가장 호환이 잘되며 이것보다 상위버전 설치시 FlmBanner가 동작하지 않을 수 있습니다.
Expo Project is most compatible with version 3.17.4, and the FlmBanner may not work when installing a higher version.

# npm install react-native-gesture-handler
# npm install react-native-reanimated@3.17.4

-babel.config.js
–> 이 파일이 없으면 파일을 직접 만듧니다.
If this file does not exist, create it yourself.
–> 프로젝트 폴더 내 package.json파일과 동일한 위치에 만들면됩니다.
Just create it in the same location as the package.json file in your project folder.
–> 아래에 reanimated모듈을 위해 다음과 같은 설정을 적용합니다.
Apply the following settings for the reanimated module below:

// babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin', //react-native-reanimated module setting
    ],
  };
};

2)React-Native CLI

— react-native-freelifemakers-ui 이 모듈을 사용하기 위해서는 아래 두개의 모듈을 반드시 설치해야 합니다.
To use this module, you must install the following two modules: react-native-freelifemakers-ui

— 안드로이드에서는 react-native-reanimated모듈이 안정적으로 동작하지 않는 경우가 있습니다.
On Android, the react-native-reanimated module may not work reliably.

— IOS에서는 정상적으로 작동합니다.
It works fine on iOS.

— 리액트네이티브 CLI에서는 react-native-reanimated 최선버전을 설치해도 됩니다.
For React Native CLI, you can install the latest version of react-native-reanimated.

— 현재 3.18.0버전 설치해서 테스트 해본 결과 잘 작동 합니다.
I have currently installed version 3.18.0 and tested it and it works well.

# npm install react-native-gesture-handler
# npm install react-native-reanimated

-babel.config.js
–> 이 파일이 없으면 파일을 직접 만듧니다.
If this file does not exist, create it yourself.
–> 프로젝트 폴더 내 package.json파일과 동일한 위치에 만들면됩니다.
Just create it in the same location as the package.json file in your project folder.
–> 아래에 reanimated모듈을 위해 다음과 같은 설정을 적용합니다.
Apply the following settings for the reanimated module below:

// babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-reanimated/plugin'], //react-native-reanimated module setting
};

2.사용하기 / Usage

  • 배너를 외부 버튼으로 열고 닫을 수 있고 배너 내의 닫기 버튼 탭할 경우 배너를 개별적으로 닫을 수 있습니다.
    Banners can be opened and closed with external buttons, and banners can be closed individually by tapping the close button within the banner.
  • 텍스트 배너, 이미지 배너, 커스텀 배너가 있습니다.
    There are text banners, image banners, and custom banners.
  • 아래의 코드를 복사해서 실행해보고 잘 작동하면 수정해서 사용하시면 됩니다.
    Please copy and run the code below. If it works well, you can modify it and use it.

1)텍스트 배너 / Text Banner

        <FlmBanner
          type="text"
          data={{
            message: "텍스트배너 (애니메이션 적용)/Text Banner (Animated)",
            id: "promo1",
          }}
          onPress={() =>
            Alert.alert(
              "텍스트 배너/Text Banner",
              "텍스트 배너가 클릭되었습니다/Text banner clicked",
            )
          }
          isVisible={isTextBannerVisible} // 개별 isVisible prop 전달 / Passing individual isVisible props
          onClose={handleCloseTextBanner} // 닫기 콜백 함수 전달 / Passing a close callback function
          animationMaxHeight={80}
          style={{
            backgroundColor: "#e0f7fa",
            borderColor: "#00bcd4",
            borderWidth: 1,
          }}
          textStyle={{ color: "#006064", fontSize: 17 }}
        />

2)이미지 배너 / Image Banner

        <FlmBanner
          type="image"
          data={{
            imageUrl: "https://picsum.photos/600/400",
            title:
              "이미지배너 1! (애니메이션 적용)/Image Banner 1! (Animation applied)",
            id: "product2",
          }}
          onPress={() =>
            Alert.alert(
              "이미지 배너 1/Image Banner 1",
              "이미지 배너 1이 클릭되었습니다!/Image banner 1 has been clicked!",
            )
          }
          isVisible={isImageBanner1Visible} // 개별 isVisible prop 전달
          onClose={handleCloseImageBanner1} // 닫기 콜백 함수 전달
          style={{ borderColor: "#ffeb3b", borderWidth: 2 }}
          imageStyle={{ borderRadius: 15 }}
          titleStyle={{ color: "#4a148c", fontSize: 20, textShadowRadius: 8 }}
        />

3)커스텀 배너 / Custom Banner

        <FlmBanner
          type="image"
          data={{
            imageUrl:
              "https://avatars3.githubusercontent.com/u/17571969?s=400&v=4",
            title:
              "커스텀배너 2! (애니메이션 적용) / Custom Banner 2! (Animated)",
            id: "product3",
          }}
          onPress={() =>
            Alert.alert(
              "이미지 배너 2 / Image Banner 2",
              "이미지 배너 2가 클릭되었습니다! / Image banner 2 was clicked!",
            )
          }
          isVisible={isImageBanner2Visible} // 개별 isVisible prop 전달 / Passing individual isVisible props
          onClose={handleCloseImageBanner2} // 닫기 콜백 함수 전달 / Passing a close callback function
          style={{ backgroundColor: "#f3e5f5", borderRadius: 20 }}
          imageStyle={{ opacity: 0.9 }}
          titleStyle={{ color: "#4a148c", fontSize: 22, fontWeight: "normal" }}
        />

3.예제코드 / Example code

// FlmBannerApp.js
import React, { useState } from "react";
import {
  SafeAreaView,
  ScrollView,
  View,
  StyleSheet,
  Text,
  Alert,
} from "react-native";

import { FlmBanner, FlmButton, FlmText } from "react-native-freelifemakers-ui";

const FlmBannerApp = () => {
  //  각 배너의 가시성을 위한 개별 상태 정의 / Define individual states for visibility of each banner
  const [isTextBannerVisible, setIsTextBannerVisible] = useState(true);
  const [isImageBanner1Visible, setIsImageBanner1Visible] = useState(true);
  const [isImageBanner2Visible, setIsImageBanner2Visible] = useState(true);

  // 각 배너의 닫기 핸들러 함수 / Close handler function for each banner
  const handleCloseTextBanner = () => {
    setIsTextBannerVisible(false);
    console.log("텍스트 배너 닫힘 / Text Banner Close");
  };

  const handleCloseImageBanner1 = () => {
    setIsImageBanner1Visible(false);
    console.log("이미지 배너 1 닫힘 / Image Banner 1 Close");
  };

  const handleCloseImageBanner2 = () => {
    setIsImageBanner2Visible(false);
    console.log("이미지 배너 2 닫힘 / Image Banner 2 Close");
  };

  // 모든 배너를 동시에 토글하는 함수 (외부 버튼용) / Function to toggle all banners simultaneously (for external buttons)
  const handleToggleAllBanners = () => {
    setIsTextBannerVisible((prev) => !prev);
    setIsImageBanner1Visible((prev) => !prev);
    setIsImageBanner2Visible((prev) => !prev);
    console.log(
      `모든 배너 상태 토글/Toggle all banner states: ${isTextBannerVisible ? "숨김/hidden" : "오픈/open"}`,
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollViewContent}>
        <FlmText style={styles.heading}>
          배너 숨김/오픈 토글 예시 (닫기 버튼 & 애니메이션)
        </FlmText>
        <FlmText style={styles.heading}>
          Banner Hide/Open Toggle Example (Close Button & Animation)
        </FlmText>
        {/* 텍스트 배너 */}
        <FlmBanner
          type="text"
          data={{
            message: "텍스트배너 (애니메이션 적용)/Text Banner (Animated)",
            id: "promo1",
          }}
          onPress={() =>
            Alert.alert(
              "텍스트 배너/Text Banner",
              "텍스트 배너가 클릭되었습니다/Text banner clicked",
            )
          }
          isVisible={isTextBannerVisible} // 개별 isVisible prop 전달 / Passing individual isVisible props
          onClose={handleCloseTextBanner} // 닫기 콜백 함수 전달 / Passing a close callback function
          animationMaxHeight={80}
          style={{
            backgroundColor: "#e0f7fa",
            borderColor: "#00bcd4",
            borderWidth: 1,
          }}
          textStyle={{ color: "#006064", fontSize: 17 }}
        />
        <View style={{ height: 20 }} />

        {/* 이미지 배너 1 */}
        <FlmBanner
          type="image"
          data={{
            imageUrl: "https://picsum.photos/600/400",
            title:
              "이미지배너 1! (애니메이션 적용)/Image Banner 1! (Animation applied)",
            id: "product2",
          }}
          onPress={() =>
            Alert.alert(
              "이미지 배너 1/Image Banner 1",
              "이미지 배너 1이 클릭되었습니다!/Image banner 1 has been clicked!",
            )
          }
          isVisible={isImageBanner1Visible} // 개별 isVisible prop 전달
          onClose={handleCloseImageBanner1} // 닫기 콜백 함수 전달
          style={{ borderColor: "#ffeb3b", borderWidth: 2 }}
          imageStyle={{ borderRadius: 15 }}
          titleStyle={{ color: "#4a148c", fontSize: 20, textShadowRadius: 8 }}
        />
        <View style={{ height: 20 }} />

        {/* 이미지 커스텀 배너 2 / Image Custom Banner 2*/}
        <FlmBanner
          type="image"
          data={{
            imageUrl:
              "https://avatars3.githubusercontent.com/u/17571969?s=400&v=4",
            title:
              "커스텀배너 2! (애니메이션 적용) / Custom Banner 2! (Animated)",
            id: "product3",
          }}
          onPress={() =>
            Alert.alert(
              "이미지 배너 2 / Image Banner 2",
              "이미지 배너 2가 클릭되었습니다! / Image banner 2 was clicked!",
            )
          }
          isVisible={isImageBanner2Visible} // 개별 isVisible prop 전달 / Passing individual isVisible props
          onClose={handleCloseImageBanner2} // 닫기 콜백 함수 전달 / Passing a close callback function
          style={{ backgroundColor: "#f3e5f5", borderRadius: 20 }}
          imageStyle={{ opacity: 0.9 }}
          titleStyle={{ color: "#4a148c", fontSize: 22, fontWeight: "normal" }}
        />

        <View style={{ height: 30 }} />

        {/* 모든 배너를 동시에 토글하는 버튼 / Button to toggle all banners simultaneously */}
        <FlmButton
          title={
            isTextBannerVisible ||
            isImageBanner1Visible ||
            isImageBanner2Visible
              ? "모든 배너 숨기기 / Hide all banners"
              : "모든 배너 보이기 / Show all banners"
          }
          onPress={handleToggleAllBanners}
        />

        <View style={{ height: 50 }} />
        <Text style={styles.content}>
          여기는 배너 아래의 다른 콘텐츠입니다. 배너가 애니메이션과 함께
          사라지거나 나타날 것입니다.
        </Text>
        <Text style={styles.content}>
          Here is another content below the banner. The banner will disappear or
          appear with animation.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  scrollViewContent: {
    paddingVertical: 20,
    alignItems: "center",
  },
  heading: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 30,
    textAlign: "center",
  },
  content: {
    fontSize: 16,
    textAlign: "center",
    marginHorizontal: 20,
    lineHeight: 24,
  },
});

export default FlmBannerApp;

4.스크린샷 / ScreenShot

Leave a Reply

Your email address will not be published. Required fields are marked *