0. 소개

최근 자작 앱에 대해 배우고 있습니다.
이 기사는, 전회까지의 제가 쓴 기사를 바탕으로 하고 있습니다.
처음부터 앱을 만들고 싶다면 이 기사를 보시기 전에,

【React Native】 앱 개발 ~ 프로젝트 빌드부터 아래 준비까지 ~
【React Native】 앱 개발 ~ 디렉토리 구조화 ~
【React Native】 앱 개발 ~React Navigation의 환경 구축~
【React Native】 앱 개발 ~ 화면 전환에 도전해 보았다 ~

를 참고로 하고, 같은 상태까지 가지런히 해 주셨으면 합니다.

스스로 환경 등이 갖추어져 있고, 화면을 만드는 방법의 부분만을 참고로 하고 싶은 경우는,

React.Component{}

야

StyleSheet.create()

안만을 참고해 주시면 문제 없다고 생각합니다.

1. 마지막 상태

이번에는, 전회의 계속으로부터, 실제로 앱의 대기 화면( WelcomeScreen )을 써 보겠습니다.

이전에는 React Navigation을 사용하여 여러 화면의 근원이 되는 .js 파일( WelcomeScreen.js, SettingScreen.js )만을 준비했습니다. 유쿠유쿠는 App.js에서 이러한 화면을 전환하려고 획책하고 있습니다.

그리고 WelcomeScreen.js의 설명은

WelcomeScreeen.js

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

class WelcomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome!!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default WelcomeScreen;

되었습니다.

화면은



되었습니다.
그럼 여기에서 다시 시작합니다.

목표는 이런 느낌입니다.



이것은 친구가 레이아웃 해준 멋진 플랫 디자인입니다.
세련되네요.
감사 밖에 없다.

2. 구조화

대략적으로 구조를 생각하면,

-ベースのコンテナ
|
|---背景のコンテナ
|   |--上半分の薄緑色の背景
|   |--下半分の白色の背景
|
|---文字・アイコンのコンテナ
|   |--Welcome toとタイトルのbox
|   |--あいこんのbox
|   |--下のSTARTボタンのbox

같은 느낌이 되네요.

이것을, StyleSheet 로의 장식을 최소한으로 해 구조화해 보면,

WelcomeScreen.js

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

class WelcomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>

        <View style={[styles.backgroundContainer, StyleSheet.absoluteFillObject]}>
          <View style={[{flex:1}, styles.sampleBox]}>
          </View>
          <View style={[{flex:1}, styles.sampleBox]}>
          </View>
        </View>

        <View style={[styles.mainContainer]}>
          <View style={[{flex: 1}, styles.sampleBox]}>
            <View>
              <Text style={[styles.sampleText]}>Welcome to</Text>
            </View>
            <View>
              <Text style={[styles.sampleText]}>タイトル</Text>
            </View>
          </View>

          <View style={[{flex: 1,backgroundColor:'#aaa'}, styles.sampleBox]}>
            <View style={[styles.iconBox]}>
              <Text style={[styles.sampleText]}>あいこん</Text>
            </View>
          </View>

          <View style={[{flex: 1}, styles.sampleBox]}>
            <View>
              <Text style={[styles.sampleText]}>LET'S START</Text>
            </View>
          </View>
        </View>

      </View>
    );
  }
}

//StyleSheet--------------------------------

const styles = StyleSheet.create({

  container:{
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  sampleBox:{
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: "gray",
    borderWidth: 1,
  },

  sampleText: {
      fontSize: 35,
      textAlign: 'center',
      color: 'grey',
      fontWeight: 'bold',
    },

});

export default WelcomeScreen;

이런 느낌이 들었습니다.
이때의 스마트폰 화면은 이런 느낌입니다.


포인트를 올립니다.

point1. 'style=' 안에 쓰는 방법

 <View style={[{flex:1}, styles.sampleBox]}>

나는 이런 식으로 쓰고 있습니다. 외부에 {}를 쓰고 그 안에 []를 씁니다.
[] 중,
왼쪽의 { }에는 아래의 StyleSheet에서 가져 오지 않고 직접 쓰는 것을
오른쪽에는 아래의 StyleSheet에서 가져오는 것을 씁니다.

어쩌면 나의 가류일지도 모르기 때문에, 추천등 있으면 교시 바랍니다.

point2. flex 사용법

flex는 동일한 컨테이너의 동일한 계층 구조에 있는 것의 상대적인 크기를 결정합니다.

현 단계에서는 backgroundContainer도 mainContainer도 그 한계 아래의 계층에 있는 요소의 크기(세로)의 비율을 동일하게 하고 있습니다.

point3. 존재하지 않는 스타일도 구조체 안에 쓸 수 있다.

<View style={[styles.mainContainer]}>

아니,

<View style={[styles.iconBox]}>

등, 아래의 StyleSheet 로 정의하고 있지 않는 스타일을 포함하고 있어도 에러를 토하지는 않습니다.

"나중에 세세한 크기나 색 등을 수정할까..."

등이라고 생각하고 있는 경우는, 구조화의 단계에서 잠정적으로 써 두어도 좋을지도 모릅니다.
라고 하는 것도, return() 속에는 코멘트를 쓸 수 없습니다.
(쓰는 법을 아는 분은 알려주세요 ...)

그래서 스타일의 이름만으로도 써두면 이 구조체가 무엇인지 알기 때문에 코멘트의 대체로서 사용할 수 있습니다.

point4. StyleSheet.absoluteFillObject

이것은 배경을 가로 세로 가득 채우고 싶은 경우에 사용할 수 있습니다.
스스로 아래의 StyleSheet 로 스타일을 정의하지 않아도 사용할 수 있는 스타일인 것 같습니다.
그 밖에도 여러가지 'StyleSheet.hogehoge'처럼 끌어올 수 있는 것도 있을 것 같네요.

3. 장식

편집 중...