スプラッシュ画面
- アプリ起動時のスプラッシュ画面の画像は幅は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 />}
/>
