Chapter 05無料公開

トップページ

はる@フルスタックエンジニア
はる@フルスタックエンジニア
2022.10.05に更新

React Native のトップページは App.js になります。

App.js を下記のように書き換えます。

SafeAreaProviderとSafeAreaViewを設定することで、スマホのノッチ部分を避けて画面が表示されるようになります。

StatusBarでスマホ上部のエリアの背景や文字の色を変えることができます。

RootNavigationでナビゲーションを設定していきましょう。

import React from 'react'
import { StatusBar } from 'react-native'
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'

import RootNavigation from './src/navigation'

const App = () => {
  return (
    <SafeAreaProvider>
      <SafeAreaView className="flex-1 bg-black">
        <StatusBar barStyle="light-content" backgroundColor="black" />
        <RootNavigation />
      </SafeAreaView>
    </SafeAreaProvider>
  )
}

export default App