게임 화면 작업 - 노치 고려해 SafeAreaView 활용, 제목 컴포넌트 생성

App.js

return <LinearGradient colors={['#4e0329','#ddb52f']} style={styles.rootScreen}>

    <ImageBackground

      source={require('./assets/images/background.png')}

      resizeMode="cover"

      style={styles.rootScreen}

      imageStyle={styles.backgroundImage}

    >

      {/* 노치(카메라부분)에 콘텐츠가 가려지기 떄문에 SafeAreaView 사용은*/}

      <SafeAreaView style={styles.rootScreen}>{screen}</SafeAreaView>

    </ImageBackground>

  </LinearGradient>;

게임화면인 screen 을 SafeAreaView로 감쌌다.

 

 

 

 

 

 

 

 

GameScreen.js

게임화면

import React from 'react'

import { Text, StyleSheet, View } from 'react-native'

import Title from '../components/Title'

function GameScreen(props) {

  return (

    <View style={styles.screen} >

      <Title>게임 스크린</Title>

      <View>

        <Text>업 or 다운</Text>

       

      </View>

    </View>

  )

}

export default GameScreen

const styles = StyleSheet.create({

  screen: {

    flex: 1,

    padding: 24

  }

})

flex:1 을 통해 화면 전체를 활용

 

 

Title.js

제목 컴포넌트

import React from 'react'

import { Text, StyleSheet, View } from 'react-native'

function Title({children}) {

  return (

    <Text style={styles.title}>{children}</Text>

  )

}

export default Title;

const styles = StyleSheet.create({

    title: {

        fontSize: 24,

        fontWeight: 'bold',

        color: '#ddb52f',

        textAlign: 'center',

        borderWidth: 2,

        borderColor: '#ddb52f',

        padding: 12

    }

})