More than 3 years have passed since last update.

React Navigationのヘッダー下のborderを消す

Last updated at 2020-06-01Posted at 2020-04-02

前提

ReactNative 0.61.4
react-navigation v5

問題

ヘッダーとコンポーネントが連続して一つに見える、以下のようなデザインを実装したいのだが、
境界の白線が消せない。

一体どこをいじったらいいのか。

方法

shadowColor: 'transparent' をheaderStyleに設定すれば消える。

※追記（Androidの方はこれも必要でした。）
elevation: 0 をheaderStyleに設定すれば消える。

念のためコードは以下


<NavigationContainer theme={Theme}>
     <Stack.Screen
          name={screen}
          component={Screen}
          options={{
            title: 'Header Title',
            headerStyle: {
              shadowColor: 'transparent', //ここ(iOS)
              shadowOpacity: 0, // ここ(iOSはこちらでも可)
              elevation: 0, // ここ(Android)
            },
          }}
        />
      </Stack.Navigator>
</NavigationContainer>

参考記事

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up