typescript - Ako využiť useContext v expo routeri?

Používam novú verziu Expo-Router, ktorá používa navigáciu založenú na súboroch. Použil som Reactov context API + hook useReducer na vytvorenie univerzálneho jazykového kontextu v aplikácii. Problém je, že nemám tušenie, kde obaliť poskytovateľa kontextu, nevidím žiadnu hlavnú komponentu.

moja štruktúra projektu:

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"

Našiel som túto diskusiu na GitHub okolo rovnakého problému, ale nemám žiadny súbor _layout

Odpoveď č. 1

Musíte mať súbor _layout na najvyššej úrovni. Zabaľte ho do poskytovateľa a malo by to pre vás fungovať.

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

Odpoveď č. 2

Ak nepotrebujete štýlovanie, ktoré prichádza s layoutom, najlepší spôsob, ako to urobiť, je použiť Slot z Expo Router bez použitia stacku. Táto metóda je tiež skvelá pre veľké projekty, pretože bude aplikovaná v celom projekte, ak je súbor _layout umiestnený na vrchu alebo na koreňovej úrovni projektu.

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

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

Súvisiace články