typescript - Làm thế nào để sử dụng useContext trong expo router?

Tôi đang sử dụng phiên bản Expo-Router mới sử dụng điều hướng dựa trên tệp. Tôi đã dùng React's context API + hook useReducer để tạo một context ngôn ngữ chung trong ứng dụng. Vấn đề là tôi không biết nên bọc context provider ở đâu, vì tôi không thấy có component gốc nào.

cấu trúc dự án của tôi:

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" 

Tìm thấy cuộc thảo luận này trên Github về cùng một vấn đề, nhưng tôi không có file _layout nào

Câu trả lời #1

Bạn phải có một tệp _layout cấp cao nhất. Bao nó bằng một provider và nó sẽ hoạt động cho bạn.

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

Câu trả lời #2

Nếu bạn không cần kiểu dáng đi kèm với bố cục, cách tốt nhất để làm việc này là sử dụng Slot từ Expo Router mà không sử dụng stack. Phương pháp này cũng rất tốt cho các dự án lớn vì nó sẽ được áp dụng trên toàn bộ dự án của bạn nếu file _layout được đặt ở cấp trên cùng hoặc cấp gốc của dự án.

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

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