はじめに
突然ですが、最近ReactNativeの学習を始めました！
ReactNative経験者の中には、クロスプラットフォームでアプリが作れると聞いて始めたものの、いざ触ってみたら難しい...と感じた方もいらっしゃるのではないでしょうか。
この記事では、ReactNative初心者がつまずきやすいポイントを実体験をまじえて書いていければと思います。
・事前情報
筆者は、他言語のモバイルアプリ開発経験もなければ、Reactも少し勉強したことがあるくらいのほぼ初心者です😇
対象読者
- ReactNativeに入門したばかりの人
-
ExpoorBare React Nativeの選択で迷っている人 - ネイティブアプリ開発が初めてで仕組みがよく分からない人
- 「エラー出まくって全然進まない。。」と悩んでいる人
1. 【最初の選択】Expoで始める or Bareで始める？
落とし穴
最初に npx react-native init を叩いたけど、「Android Studioが要るの！？Xcodeも？」と、環境構築で挫折しそうになりました。
ReactNativeの選択肢
ReactNativeには2つのスタート方法があります。
| モード | 説明 | 向いている人 |
|---|---|---|
| Expo（Managed） | Expoの環境が抽象化してくれて手軽に始められる | 初学者、素早く動かしたい人 |
| Bare（CLI） | ネイティブコードを直接触れる柔軟な構成 | カメラなどネイティブ機能を使いたい中〜上級者 |
初心者は基本、Expo一択です。
ただ、将来的にネイティブコードを書く予定がある場合は、早めにBareへ慣れるのも一つの手です。
2. 【画面真っ白問題】開発したアプリが何も表示されない！
いろいろ書いてやっと画面が出来た！となっても真っ白…あれ…？となることが。。
よくある原因
-
App.tsxにデフォルトのエクスポートがない - スタイルで
flex: 1を指定していない - スプラッシュ画面の残像（特にExpo）
が挙げられるそうです。
解決策
export default function App() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello React Native!</Text>
</View>
);
}
flex: 1がないと Viewが画面に広がらず「真っ白」に見えます。結構あるあるらしい。。
3. 【iOSだけ動かない問題】Androidは動くのにiOSで落ちる
これはクロスプラットフォーム開発ならではのつまづきポイントかもしれないですね。
原因
・iOSシミュレータが古い
・Pod installを忘れている
・Xcodeのバージョンに未対応のモジュール
など。
ベストプラクティス
※Bare React Nativeの場合は、必ずこの手順を忘れずに！
cd ios
pod install
macOS＋Xcode環境でないとiOSはビルドできません（Windows不可）
4. 【画像が出ない】require() or uri: どっち使うの？
こっからは文法というか書き方的なお話になります。
・違い
| 書き方 | 特徴 |
|---|---|
| source={require('./logo.png')} | ローカル画像、ビルド時に含む |
| source={{ uri: imageUrl }} | ネット経由、動的に読み込む |
開発中に出ないときは、パスの確認＋キャッシュクリアをすると意外と解消されたりします。
5. 【状態管理どうする？】useStateだけじゃすぐ破綻する？
画面が少し増えると、props渡しまくってコードがぐちゃぐちゃになりがち…(実体験)
解決策
・画面が1〜2枚なら、useState or useReducerがよさそう。
複数画面で状態共有したいなら、Context API、複雑なら、Zustand or Recoilがおすすめ。
// Context APIの例（最低限）
const ThemeContext = createContext("light");
function App() {
return (
<ThemeContext.Provider value="dark">
<Home />
</ThemeContext.Provider>
);
}
6. 【デバッグ地獄】ログが見づらい、何が起きてるか分からん！
実践Tips
・console.logの代わりに、react-native-logsを使うとログが色分けされて便利！
・デバッガはChromeよりも、React Native Debuggerが超便利
brew install --cask react-native-debugger
ReduxやAsyncStorageも1画面で確認できます
7. 【ビルド遅すぎ問題】修正しただけなのに毎回時間かかる
※ありがちな落とし穴
調べてみると以下のケースが多いようです。。
・Watchmanやキャッシュの破損
・再ビルドのたびに全依存モジュールが評価されている
対処法
watchman watch-del-all
rm -rf node_modules
npm cache clean --force
npm install
Android Studioのキャッシュも同様にクリアして再起動で快適になります。
さいごに
React Nativeは、環境構築や慣れるまでが大変ですが、使いこなせるようになると本当に強力なツールです。
最初はとにかく動けばOKの感覚で、設計や状態管理など細かい部分は、あとから少しずつ身につければ大丈夫と個人的には思ってます！
もし、この記事を読んで共感していただけたり、少しでもお役に立てたのであれば、それだけで書いた甲斐があったと思っています。