react native 기본 코드 바탕으로 스크롤뷰 초안 만들기

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

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): JSX.Element {
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[styles.sectionTitle,{color: 'black'}]}>
        {title}
      </Text>
      <Text style={[styles.sectionDescription,{color: 'black'}]}>
        {children}
      </Text>
    </View>
  );
}

function App(): JSX.Element {

  const backgroundStyle = {
    backgroundColor: 'darkgray',
    flex: 1 //전체 스크롤뷰로 하나의 배경을 이루기 위함(이거 없으면 스크롤 아래는 흰색으로 나옴)
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle='dark-content'
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <View style={{ backgroundColor: 'darkgray'}}
        accessible={true}>
          <Section title="뉴스">
          </Section>
          <Section title="커피빈">
          </Section>
          <Section title="쿠팡">
          </Section>
          <Section title="도서">
          </Section>
          <Section title="마켓">
          </Section>
          <Section title="꽃집">
          </Section>
          <Section title="배달">
          </Section>
          <Section title="쇼핑">
          </Section>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 20,
    paddingHorizontal: 30,
    borderBottomColor: 'black', //구분선
    borderBottomWidth: 1//구분선
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 10,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

color 코드는 여기서: https://runebook.dev/ko/docs/react_native/colors

 

우선 코드를 그나마 깔끔하게 하기 위해 안 쓰는 애들은 삭제, 다크모드도 우선 고려하지 않았다.

다음엔 stack을 만들어서 화면 전환을 시도해볼 것이다.