타닥타닥 개발자의 일상

react / flex 속성 이용하여 화면 비율 조정하기 (typescript) 본문

코딩 기록/react

react / flex 속성 이용하여 화면 비율 조정하기 (typescript)

NomadHaven 2022. 3. 7. 18:27
프로젝트 생성문
npx react-native init sample18 --template react-native-template-typescript

 

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


//flex : 크기 비율로 설정하는 것
export default function App(){

  return (
    <View style={style.container}>
      <View style={style.caseOne}/>
      <View style={style.caseTwo}>
        <Text>두번째 화면</Text>
        </View>
      <View style={style.caseThree}/>
      </View>
  )

}

const style = StyleSheet.create({
  container:{
    flex:1,
    width:300
  },
  caseOne:{
    flex:1,
    backgroundColor:'yellow'
  },
  caseTwo:{
    flex:1,
    backgroundColor:'blue'
  },
  caseThree:{
    flex:8,
    backgroundColor:'green',
   height:200
  }
})

 

실행화면

'코딩 기록 > react' 카테고리의 다른 글

react / useEffect 써서 버튼 누를때 특정 텍스트 화면에 보이게 하기 / typescript  (0) 2022.03.08
react / flex 이용하여 원하는 비율로 화면에 아이템 구현하기 / typescript  (0) 2022.03.07
react / 색상코드와 방향 조절로 화면에 색상카드 만들기 / SafeAreaView / transform : rotateX, rotateZ  (0) 2022.03.07
react 이미지 화면에 구현하기 (파일 불러와서 구현하기 / 이미지 주소로 구현하기) / 글자 자간, 글자 배경색 지정하기 / 텍스트 영역에 테두리 만들기 / imageview / text StyleSheet 모음  (0) 2022.03.07
react / checkbox 만들고 check된 화면에 상태 확인, 출력하기 (typescript, Checkbox, Button)  (0) 2022.03.07
'코딩 기록/react' Related Articles more
Comments