フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

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

スプラッシュ画面

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

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

アプリアイコン

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

app.jsonの設定

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

ローディング

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

  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でローディングを実装する場合

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