react / flex 이용하여 원하는 비율로 화면에 아이템 구현하기 / typescript

프로젝트 생성문

npx react-native init sample19 --template react-native-template-typescript

 

src 폴더 생성 > components 폴더 생성 > Flexbox.tsx & Marginadding.tsx & WidthHeight.tsx 파일 생성

 

 

WidthHeight.tsx 

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export const WidthHeight= () =>(
    
        <View style={style.container}>
        <Text>200X100</Text>
      </View>
    )
    

    const style = StyleSheet.create({
        container:{
          width:200,
          height:100,
          borderWidth:StyleSheet.hairlineWidth,
          borderColor:'#bbb'
        }
      })

 

 

Marginadding.tsx

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export const MarginPadding = () =>(

    <View style={style.cotainer}>
        <Text>제목입니다.</Text>
    </View>

)
    const style =StyleSheet.create({
        cotainer:{
            marginHorizontal:'10%',
            padding:16,
            borderWidth:StyleSheet.hairlineWidth,
            borderColor:'#ccc',
            backgroundColor:'#ffff00'
        }
    })

 

 

Flexbox.tsx 

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function Flexbox(){
    return(
        <View style={style.container}>
            <Text style={style.item}>아이템1</Text>
            <Text style={style.item}>아이템2</Text>
            <Text style={style.item}>아이템3</Text>
            <Text style={style.item}>아이템4</Text>
            <Text style={style.item}>아이템5</Text>
            <Text style={style.item}>아이템6</Text>
        </View>
    )
}

const style = StyleSheet.create({
container:{
    flexDirection:'row', //가로정렬
    flexWrap:'wrap' //줄바꿈
},
item:{
    width:200,
    height:100,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor:'#bbb'
}

})

 

App.tsx

import React from "react";
import { StyleSheet, View } from "react-native";
import Flexbox from "./src/components/Flexbox";
import { MarginPadding } from "./src/components/Marginadding";
import { WidthHeight } from "./src/components/WidthHeight";



export default function App(){

  return(
    <View style={style.container}>
      <WidthHeight/>
      <MarginPadding/>
      <Flexbox/>

      <View style={style.box}/>

      
    </View>
 
  )
}

const style = StyleSheet.create({
  container:{
    flex:1
  },
  box:{
    width:150,
    height:100,
    backgroundColor:'red',
    position:'absolute', // 오른쪽 하단
    right:16,
    bottom:16
  }

})

 

실행화면