[React-Native] Style 연습-웹툰페이지 만들기

여태까지 배운

• Props
• State
• Style (flex위주) 

를 이용해서

 

 

네이버 웹툰 페이지 만들기

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

class MainImage extends Component {
  render(): React$Node {
    let MainImg = '';

    if (this.props.number == 1) {
      MainImg = require('./assets/main_1.png');
    } else if (this.props.number == 2) {
      MainImg = require('./assets/main_2.png');
    } else if (this.props.number == 3) {
      MainImg = require('./assets/main_3.png');
    } else if (this.props.number == 4) {
      MainImg = require('./assets/main_4.png');
    }

    return (
      <View style={{flex: 0.62}}>
        <Image source={MainImg} style={{width: 450, height: 240}}></Image>
      </View>
    );
  }
}

class WebImage extends Component {
  render(): React$Node {
    let WebImg = '';
    let WebTitle = '';
    let WebGrade = '';
    let WebWriter = '';

    if (this.props.rank == 1) {
      WebImg = require('./assets/web_1.jpeg');
      WebTitle = '전지적 독자 시점';
      WebGrade = '★ 9.96';
      WebWriter = 'UMI / 슬리피-C';
    } else if (this.props.rank == 2) {
      WebImg = require('./assets/web_2.jpeg');
      WebTitle = '하렘의 남자들';
      WebGrade = '★ 9.87';
      WebWriter = '알파타르트,히어리 / 영빈';
    } else if (this.props.rank == 3) {
      WebImg = require('./assets/web_3.jpeg');
      WebTitle = '여주실격!';
      WebGrade = '★ 9.95';
      WebWriter = '기맹기';
    } else if (this.props.rank == 4) {
      WebImg = require('./assets/web_4.jpeg');
      WebTitle = '모죠의 일지';
      WebGrade = '★ 9.97';
      WebWriter = '모죠';
    } else if (this.props.rank == 5) {
      WebImg = require('./assets/web_5.jpeg');
      WebTitle = '엔딩 후 서브남을 주웠다';
      WebGrade = '★ 9.96';
      WebWriter = '황도톨,정서 / 정서';
    } else if (this.props.rank == 6) {
      WebImg = require('./assets/web_6.jpeg');
      WebTitle = '원수를 사랑하라';
      WebGrade = '★ 9.92';
      WebWriter = '정윤 / 태건';
    } else if (this.props.rank == 7) {
      WebImg = require('./assets/web_7.jpeg');
      WebTitle = '남주의 첫날밤을 가져버렸다';
      WebGrade = '★ 9.97';
      WebWriter = '황도톨,티바 / MSG';
    } else if (this.props.rank == 8) {
      WebImg = require('./assets/web_8.jpeg');
      WebTitle = '새벽 두 시의 신데렐라';
      WebGrade = '★ 9.96';
      WebWriter = '산차';
    } else if (this.props.rank == 9) {
      WebImg = require('./assets/web_9.jpeg');
      WebTitle = '연놈';
      WebGrade = '★ 9.86';
      WebWriter = '상하';
    }

    return (
      <View style={{flex: 1, height: 160}}>
        <Image source={WebImg} style={{width: 140, height: 140}}></Image>
        <Text style={styles.Title}>{WebTitle}</Text>
        <Text style={styles.Grade}>{WebGrade}</Text>
        <Text style={styles.Writer}>{WebWriter}</Text>
      </View>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mainOrder: 1,
    };
  }

  componentDidMount() {
    // 3초 마다 1씩 증가
    setInterval(
      () =>
        this.setState((previousState) => ({
          mainOrder: previousState.mainOrder + 1,
        })),
      3000,
    );
  }

  render(): React$Node {
    // mainOrder이 4 이상이 되면 1로 초기화
    if (this.state.mainOrder > 4) {
      this.setState({mainOrder: 1});
    }

    return (
      <View style={{flex: 1}}>
        <MainImage number={this.state.mainOrder}></MainImage>
        <View style={{flex: 0.12, flexDirection: 'row'}}>
          <Text style={styles.Day}>신작</Text>
          <Text style={styles.Day}>월</Text>
          <Text style={styles.Day}>화</Text>
          <Text style={styles.Day}>수</Text>
          <Text style={styles.Day}>목</Text>
          <Text style={styles.Day}>금</Text>
          <Text style={styles.Day}>토</Text>
          <Text style={styles.Day}>일</Text>
        </View>
        <View style={{flex: 0.53, flexDirection: 'row'}}>
          <WebImage rank={1}></WebImage>
          <WebImage rank={2}></WebImage>
          <WebImage rank={3}></WebImage>
        </View>
        <View style={{flex: 0.53, flexDirection: 'row'}}>
          <WebImage rank={4}></WebImage>
          <WebImage rank={5}></WebImage>
          <WebImage rank={6}></WebImage>
        </View>
        <View style={{flex: 0.53, flexDirection: 'row'}}>
          <WebImage rank={7}></WebImage>
          <WebImage rank={8}></WebImage>
          <WebImage rank={9}></WebImage>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  Title: {
    marginTop: 5,
    marginLeft: 8,
    fontSize: 13,
  },
  Grade: {
    marginTop: 5,
    marginLeft: 8,
    color: 'red',
    fontSize: 10,
  },
  Writer: {
    marginTop: 5,
    marginLeft: 8,
    color: 'gray',
    fontSize: 10,
  },
  Day: {
    flex: 0.6,
    marginLeft: 10,
    marginTop: 15,
    fontSize: 15,
  },
});

export default App;

 

결과

 

 

<더 알아볼 수 있으면 알아볼 내용들>

• 요일 버튼 클릭할 수 있는 기능 추가하기 (웹툰은 안바뀌더라도...귀찮아서 안되겟음 사진 너무 많음)
• 메인 이미지 밑에 (1/4) 이거 회색 추가하고싶은데.. 되면 
• 엔딩후 서브남 어쩌구랑 남주의 첫날밤 어쩌구처럼 제목 길면 자동으로 ... 으로 변경되도록 해보기 
• 그리고 각 웹툰 사이에 선 긋는거 컨테이너에 라인 되는지 찾아보기