푸딩 5일차

1. 게시글 작성 버튼 추가

• 사용한 라이브러리 : Float Button

1-1. Float 버튼 위치

• Float 버튼이 Scroll 화면 밑에 위치해서 클릭할 수 없다면 아래처럼 ScrollView 태그 밑에 Float 버튼 태그를 작성해야 한다.
• 그러면 ScrollView 위에 Float 버튼이 위치하고 잘 작동하는 걸 볼 수 있다.
• React Native는 z-index가 없지만 무조건 뒤에 있는 컴포넌트를 맨 위로 올려준다.
  

  <ScrollView>
    ...
  </ScrollView>
  <FloatButton />

1-2. Float 버튼 아이콘 이미지

• require 경로로 버튼 이미지를 불러와도 흰색으로만 보였는데
• 이미지 태그를 사용하여 원하는 이모티콘 이미지를 넣을 수 있었다.
  

수정 전

 const actions = [
     {
       text: '원해요',
       name: 'bt_want',
       icon: require('../../assets/images/want.png'),
       position: 1,
       buttonSize: 45,
     },
     {
       text: '팔게요',
       name: 'bt_sale',
       icon: require('../../assets/images/request.png'),
       position: 2,
       buttonSize: 45,
     },
 ]

수정 후

import Want from '../../assets/images/want.png'
import Request from '../../assets/images/request.png'

  const actions = [
      {
        text: '원해요',
        name: 'bt_want',
        icon: <Image source={Want} style={styles.wantButton} />,
        position: 1,
        color: '#ffffff',
        buttonSize: 45,
      },
      {
        text: '팔게요',
        name: 'bt_sale',
        icon: <Image source={Request} style={styles.requestButton} />,
        position: 2,
        color: '#ffffff',
        buttonSize: 45,
      },
  ]

2. 상품 스크롤 기능 추가

• ScrollView 태그의 속성 중에서 'horizontal' 속성을 사용하여 수평으로 배열하도록 한다. true는 수평으로, false는 수직으로 배열한다.
• 'showsHorizontalScrollIndicator' 속성은 스크롤 바를 숨기거나 보여주는데 false로 설정하면 숨겨준다.

  <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
    {saleProduct.map((saleItem, index) => [
      <TouchableOpacity style={styles.product} key={index}>
        <Image source={saleItem.image} style={styles.productImage} />
        <Text style={styles.productTitle}>{saleItem.title}</Text>
        <Text style={styles.productPrice}>{saleItem.price}원</Text>
      </TouchableOpacity>
    ])}
  </ScrollView>