Help us understand the problem. What is going on with this article?

【React Native】SafeAreaViewの色を上と下で違う色にする2つの方法

More than 1 year has passed since last update.

初めに

どうも最近React Nativeでアプリを開発しているニーザです。
今日は、React NativeのSafeAreaViewのちょっとした技を紹介したいと思います。
おそらくiPhoneアプリを開発する上で、このように上の部分だけに色をつけてheaderとして、それ以外は違う色にしたい時がきっとありますよね?
通常何もせずにコンテンツをSafeAreaViewでラップするとこの様になってしまうと思います。

スクリーンショット 2018-12-05 19.01.11.png

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'
  },
});

この下の部分だけを白くするには2つ方法があります。

やり方1

下の部分にposition: absoluteを指定して隠す。

ステップ1. Viewを一つ、SafeAreaviewコンポーネントの子要素として作る。

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-indexに100を指定していますが、特には必要なくても隠せます。
簡単に実装できますが、追加したいコンポーネントと干渉するかもしれないところが少し傷ですね。

やり方2

SafeAreaViewを2つ作る。

ステップ1.外側をwrapするViewコンポーネントを用意する。

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

ステップ2.SafeAreaViewをもう一つ作る。

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

ステップ3.Styleをそれぞれに当てる。

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

表示したいコンポーネントをラップしているSafeAreaViewのスタイルに、cotainerと同じ色を指定しましょう!
これで完成です👏
このやり方は1番外側を更にラップしたり、SafeAreaを作ったりと手順が多く大変です。
ただ干渉する心配がないところがやり方1と比較して良いですね!

完成形

スクリーンショット 2018-12-05 19.40.12.png

終わりに

SafeAreaViewの色を上と下で違う色にする2つの方法を紹介しました。
どちらのやり方もメリットもデメリットもあるので甲乙つけがたいですね。
もっといいやり方を知っている場合は是非コメントで教えてください👍

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした