TIL 10주 5일차-React Native Project

모든 리뷰가 들어있는 페이지 UI만들기

 

import { Text, View, FlatList } from 'react-native';

import styled from '@emotion/native';

import ReviewsCard from '../components/ReviewsCard';

export default function Reviews() {

 

  return (

    <>

    <ReviewsCard />

    </>

  );

}

-------

import React from "react";

import styled from '@emotion/native';

export default function ReviewsCard() {

    const url = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSXn2pRZDxVFwlPcRsH5l26ech8N867nDU6Pg&usqp=CAU"

    return (

        <Container>

      <RWrapper>

        <Poster source={{uri: url}} />

        <RColumn>

          <Rating>⭐️8.5/10</Rating>

          <RTitle>

            영웅

          </RTitle>

        </RColumn>

      </RWrapper>

    </Container>

    )

}

const Container = styled.ScrollView`

  flex-wrap: wrap;

`

const RWrapper = styled.TouchableOpacity`

  background-color: white;

  border-radius: 5px;

  margin: 10px;

`

const Poster = styled.Image`

  width: 120px;

  height: 170px;

  background-color: grey;

  border-top-left-radius: 5px;

  border-top-right-radius: 5px;

`

const RColumn = styled.View`

  padding: 10px;

`;

const Rating = styled.Text`

  color: black;

  margin-top: 5px;

  margin-bottom: 5px;

`;

const RTitle = styled.Text`

  font-size: 13px;

  font-weight: 600;

  color: black;

`;