Expo Router Layout routes

Stack.Screenは別に<Stack></Stack>の間でなくとも良い。

_layout.tsx

<Stack>
  <Stack.Screen name="index" options={{ title: "Menu" }} />
  <Stack.Screen name="[id]" options={{ title : '商品' }} />
</Stack>

同じグループであればどこにでも置ける。該当ページに置くとnameは省略できるし、タイトルなど動的に変更しやすいというメリットがある。

[id].tsx

<View ... >
  <Stack.Screen options={{ title: "Product: " + id }} />
</View>

<Tabs>も同じように使える。

タイトルの中央寄せ（androidのみ）

タイトルの中央寄せについては、全ページ一括適用みたいなのは探してみたけど見つからず、現状は各グループの_layoutに設定するようにしている。iOSはデフォルトで中央寄せになっていて左寄せはできない模様。

_layout.tsx

<Stack screenOptions={{ headerTitleAlign: "center" }}>
    <Stack.Screen name="sign-in" />
    <Stack.Screen name="sign-up" />
</Stack>

閉じタグでもOK。同じ階層のページに適用される

_layout.tsx

<Stack screenOptions={{ headerTitleAlign: "center" }} />

forsaken

FlatListのrenderItemプロパティについて

{
  item: data,
  index: number, 
  separators: { 
    highlight: () => void,
    unhighlight: () => void,
    updateProps: (select: 'leading' | 'trailing', newProps: any) => void,
  }
}

renderItemのpropsには上記のようなオブジェクトが渡るようになっている。そのため以下のように受け取る際に分割代入でitemを取り出してから渡すことが出来る。

<FlatList
  data={products}
  renderItem={({ item }) => <AnComponent item={item} />}
/>

わかりやすく書くとこうなる

<FlatList
  data={products}
  renderItem={(props) => {
    const { item } = props;
    return <AnComponent item={item} />;
  };
} />

forsaken

Supabase local にスマホからアクセスするときのIPアドレス

supabaseをdockerで動かした場合にsupabaseへの接続がうまく行かなかったので、127.0.0.1からlocalhostに変えたり、10.0.2.2に変えたり色々してみたけど、192.168系のローカルネットワークアドレスを使ったらOKでした。

// Before
Supabase.initialize(url: "http://localhost:54321", anonKey: anonKey); 
// After
Supabase.initialize(url: "http://192.168.x.x:54321", anonKey: anonKey);

このスクラップは2ヶ月前にクローズされました