[React Native] SafeAreavew 색상을 위아래로 다른 색상으로 바꾸는 두 가지 방법.

개시하다

최근 리액트 네이티브에서 애플리케이션을 개발한 니사입니다.
오늘은 React Native의 Safe Areaview 팁을 소개해 드리려고 합니다.
아마 아이폰 앱을 개발할 때 이렇게 윗부분에만 헤더로 색을 칠하는 것 외에 다른 색으로 바꾸고 싶을 때가 있지 않을까요?
보통 아무것도 하지 않고 내용을 세이프어리뷰로 싸면 이렇게 된다.

App.js

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

type Props = {};

export default class App extends Component<Props> {
  render() {
    return (
      <SafeAreaView style={styles.safeAreaView}>
        <View style={styles.container}>
          <Text>ほげほげ</Text>
        </View>
      </SafeAreaView>
    );
  }
}

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

아래 부분만 하얗게 변하는 방법은 두 가지가 있다.

방법1

다음 부분에서position:absolute 숨기기를 지정합니다.

1단계.SafeAreaview 어셈블리의 하위 요소로 View를 만듭니다.

App.js

export default class App extends Component<Props> {
  render() {
    return (
      <SafeAreaView style={styles.safeAreaView}>
        <View style={styles.container}>
          <Text>ほげほげ</Text>
        </View>
        <View style={styles.fixBottomColor} />
      </SafeAreaView>
    );
  }
}

2단계.다음 스타일을 지정합니다.

fixBottomColor: {
  backgroundColor: '#fff',
  position: 'absolute',
  bottom: 0,
  right: 0,
  left: 0,
  height: 100,
  zIndex: -10,
}

backgroundColor cotainer와 같은 색상을 지정해주세요!
이렇게 완성이 됐습니다.👏
앞으로 추가할 구성 요소와 방해를 피하기 위해 z-idex에 100개를 지정했지만 특별한 필요 없이 숨길 수 있습니다.
간단하게 할 수 있지만 추가하고 싶은 부품에 간섭할 수 있다는 점은 좀 상처다.

방법2

두 개의 SafeAreavew를 만듭니다.

1단계.외부에서 wrap을 수행할 View 어셈블리를 준비합니다.

App.js

<View style={styles.outWrapper}>
  <SafeAreaView style={styles.safeAreaWrapper}>
    <View style={styles.container}>
      <Text>ほげほげ</Text>
    </View>
  </SafeAreaView>
</View>

2단계.SafeAreavew 하나 더 만들어.

App.js

<View style={styles.outWrapper}>
  <SafeAreaView style={styles.topSafeArea} />
  <SafeAreaView style={styles.safeAreaWrapper}>
    <View style={styles.container}>
      <Text>ほげほげ</Text>
    </View>
  </SafeAreaView>
</View>

단계 3.각각 스타일을 맞히다.

outWrapper: {
  flex: 1
},
topSafeArea: {
  backgroundColor: '#1e90ff'
},
safeAreaWrapper: {
  flex: 1,
  backgroundColor: '#fff'
},
container: {
  flex: 1,
  backgroundColor: '#fff'
},

가방에 표시하고 싶은 구성 요소의 Safe AreaView 스타일에 코테이너와 같은 색을 지정하세요!
이렇게 완성이 됐습니다.👏
이 방법은 가장 바깥쪽에 랩을 덧씌우거나 세이프아레를 만들기에는 절차가 매우 어렵다.
간섭 없는 걱정거리와 방법 1이 좋다!

완성

끝맺다

SafeAreaView 색상을 위아래로 다른 색상으로 바꾸는 두 가지 방법을 소개했다.
어떤 방법이든 좋은 점도 있고 나쁜 점도 있기 때문에 구별하기 어렵다.
더 좋은 방법 아시면 꼭 댓글로 알려주세요.👍