typescript - Kuinka käyttää useContextia Expo-reitittimessä?

Käytän uutta Expo-Router-versiota, joka käyttää tiedostopohjaista navigaatiota. Käytin Reactin context API:a + useReducer-hookia luodakseni universaalin kieli-contextin sovellukseen. Ongelma on, etten tiedä, mihin ympäröin context providerin, koska näkemäni mukaan ei ole juurikomponenttia.

projektirakenteeni:

app
    Dashboard.tsx
    index.tsx
    Login.tsx
    Profile.tsx
assets
components
    Button.tsx
    Drawer.tsx
    DrawerItem.tsx
    HR.tsx
    TextField.tsx
forms
    LoginForm.tsx
ts
    declarations.d.ts
.gitignore
app.json
babel.config.js
index.ts
metro.config.js
package.json
tsconfig.json
yarn.lock

index.ts

import "expo-router/entry" 

Löysin tämän keskustelun GitHubista saman ongelman ympäriltä, mutta minulla ei ole _layout-tiedostoa

Vastaus #1

Sinulla on oltava ylimmän tason _layout-tiedosto. Kiedo se provideriin, ja sen pitäisi toimia sinulle.

<AppProvider>
      <Stack initialRouteName="home">
        <Stack.Screen
          name="home"
          options={{
            headerShown: false,
          }}
        />
      </Stack>
</AppProvider>

Vastaus #2

Jos et tarvitse asettelun mukana tulevaa tyylittelyä, paras tapa tehdä tämä on käyttää Slot Expo Routerista käyttämättä stackia. Tämä menetelmä on myös loistava suurille projekteille, koska sitä sovelletaan koko projektiisi, jos _layout-tiedosto sijoitetaan projektin ylä- tai juuritason tasolle.

import React from 'react';
import { Provider } from './context';
import { Slot } from 'expo-router';

export default function _layout() {
  return (
    <Provider>
      <Slot />
    </Provider>
  );
}