【2025年版】react nativeでアプリ作成 with codeX

codeXを使ってreact nativeでappを作成する
react native自体が初めてなので0からの開発の軌跡を記す

まずはこれに従えば良さそう
https://reactnative.dev/docs/environment-setup

npx create-expo-app houhan-kunでdir作成
↓
要件定義をo3としてcodeXに頼んでコード生成
としたけど
・UI/UXがイマイチ
・エラーめっちゃ出る
となっている。初めてすぎてdebugもできないのが辛い

react nativeはexpoを使うことを前提としているぽい
expoのチュートリアルがあって2hくらいで作れるらしいのでこれ作ってみるか〜〜
https://docs.expo.dev/tutorial/introduction/
一旦ざっくり理解した後の方がイメージつくかな

なんかiOSでひらけないんだよな。前もなった
同じネットワークに接続しているはずなのに
iコマンドでiOS用のエミュレータで開けるかどうかを確認する

tunnel機能を使えば行けた
npx expo start --tunnel
参考: https://qiita.com/minahow3/items/7e03c0304b5a1a4e891a
結構あるあるな問題らしくて、社内環境や公共wifiなど制限のある通信環境で開発を行うときはtunnelモードで実行した方がいいらしい！！

styleSheetを使うことでcssを当てることができる
以下のようにすると変更を反映することができる
iOSのエミュレータ: rを押下
expoGOのアプリ: スマホを振る

stackを使うことで自動でheaderに前の画面に戻るUIを作ってくれる
<Stack.Screen name="about" options={{ title: 'About', headerBackVisible: false }} />のようにoptionを設定すればUIを非表示にすることができる

 <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>

optionをつけないとheaderが二つ表示される

tabBarActiveTintColorを設定することでtabBarIconのfocus時のcolorを変更できる

 <Tabs
      screenOptions={{
        tabBarActiveTintColor: '#ffd33d',
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, focused }) => (
            <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
          ),
        }}
      />