ReactNativeでローディング画面を表示する(スプラッシュ画像とアプリアイコンの設定)

スプラッシュ画面

• アプリ起動時のスプラッシュ画面の画像は幅は1242ピクセル、高さは2436ピクセルにします。
• resizeModeを指定することができ、画像の縦横比に関する設定ができる。 　初期ではcontainが設定されており、これは幅・高さのうち小さい方のサイズに合わせて画像をリサイズする。

https://docs.expo.io/guides/splash-screens/

アプリアイコン

• アプリアイコンは、iOSとAndroid共通で指定もできるし、分けて作成することも可能である。
• アイコンのファイルサイズは1024x1024が適切なサイズです。 　Expoビルドサービスが他のサイズを生成します。生成される最大サイズは1024x1024です。 https://docs.expo.io/guides/app-icons/

app.jsonの設定

• app.json

    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },

ローディング

ReactNative内で外部APIと通信している間にローディングを出す方法

• ActivityIndicatorを利用して対応します。 https://reactnative.dev/docs/activityindicator

  const [loading, setLoading] = useState(false)

  useEffect(() => {
    fetchArticles()
  },[])

  const fetchArticles = async () => {
    setLoading(true)
    try{
      const response = await axios.get(URL)
      setArticles(response.data.articles)
      console.log(response)
    } catch(error){
      console.log(error)
    }
    setLoading(false)
  }

  return (

      {loading && <Loading />}
  )

WebViewでローディングを実装する場合

• startInLoadingStateとrenderLoadingをプロパティを設定して対応する
• 読み込みインジケーターを返す関数。このプロップを使用するには、startInLoadingStateプロップをtrueに設定する必要があります。 https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#renderloading

<WebView
  source={{ uri: 'https://reactnative.dev' }}
  startInLoadingState={true}
  renderLoading={() => <Loading />}
/>