如何在Expo Router中从动态路由组件向布局文件传递accountInfo？

不用Redux这类全局状态管理，针对Expo Router场景，有几个轻量化的实用方案：

方案1：直接在根布局中获取数据（最简洁高效） #

既然acctId是路由参数，根布局里同样可以通过useLocalSearchParams拿到这个参数，直接调用接口获取accountInfo，完全不需要从子组件传递。这种方式省去跨组件传值的开销，逻辑更集中，也不会产生额外性能损耗。

修改_layout.tsx代码：

import { ErrorBoundaryProps, Stack, useNavigation, useLocalSearchParams } from "expo-router";
import React, { useEffect, useState } from "react";
import Stripe from "stripe";

export default function RootLayoutNav() {
  const navigation = useNavigation();
  const { acctId } = useLocalSearchParams();
  const [accountInfo, setAccountInfo] = useState<Stripe.Account | null>(null);

  useEffect(() => {
    // 仅当存在acctId时请求数据，切换路由时清空状态
    if (acctId) {
      getAccountById(acctId as string)
        .then((data) => setAccountInfo(data))
        .catch(err => console.error('获取账户信息失败:', err));
    } else {
      setAccountInfo(null);
    }
  }, [acctId]);

  // 直接在根布局中使用accountInfo，比如传给自定义Header
  return (
    <BottomSheetModalProvider>
      <Stack>
        <Stack.Screen 
          name="index" 
          options={{ header: () => <CustomHeader accountInfo={accountInfo} /> }} 
        />
        <Stack.Screen 
          name="[acctId]/index" 
          options={{ header: () => <CustomHeader accountInfo={accountInfo} /> }} 
        />
        {/* 其他路由配置 */}
      </Stack>
    </BottomSheetModalProvider>
  );
}

方案2：使用导航参数传递数据 #

在子组件获取到accountInfo后，通过navigation.setParams将数据存入当前路由参数，再在根布局里通过useRoute读取这些参数。

修改app/[accId]/index.tsx：

import { useLocalSearchParams, useNavigation } from "expo-router";
import React, { useEffect, useState } from "react";
import Stripe from "stripe";

const ProviderComponent = (props: any) => {
  const { acctId } = useLocalSearchParams();
  const navigation = useNavigation();
  const [accountInfo, setAccountInfo] = useState<Stripe.Account | null>(null);

  useEffect(() => {
    getAccountById(acctId as string)
      .then((data) => {
        setAccountInfo(data);
        // 将数据存入导航参数
        navigation.setParams({ accountInfo: data });
      })
      .catch(err => console.error('获取账户信息失败:', err));
  }, [acctId, navigation]);

  // 其他组件代码...
};

在_layout.tsx中读取参数：

import { ErrorBoundaryProps, Stack, useNavigation, useRoute } from "expo-router";
import React from "react";

export default function RootLayoutNav() {
  const navigation = useNavigation();
  const route = useRoute();
  // 从当前路由参数中获取accountInfo
  const accountInfo = route.params?.accountInfo || null;

  return (
    <BottomSheetModalProvider>
      <Stack>
        <Stack.Screen 
          name="index" 
          options={{ header: () => <CustomHeader accountInfo={accountInfo} /> }} 
        />
        <Stack.Screen 
          name="[acctId]/index" 
          options={{ header: () => <CustomHeader accountInfo={accountInfo} /> }} 
        />
        {/* 其他路由配置 */}
      </Stack>
    </BottomSheetModalProvider>
  );
}

注意：路由切换时要处理参数清空逻辑，避免旧数据残留。

方案3：轻量化React Context（局部作用域） #

创建一个专门的Context传递账户信息，仅在需要的路由树中使用，避免全局Context的冗余。

首先创建AccountContext.tsx：

import React, { createContext, useContext, useState, ReactNode } from "react";
import Stripe from "stripe";

type AccountContextType = {
  accountInfo: Stripe.Account | null;
  setAccountInfo: (info: Stripe.Account | null) => void;
};

const AccountContext = createContext<AccountContextType | undefined>(undefined);

export function AccountProvider({ children }: { children: ReactNode }) {
  const [accountInfo, setAccountInfo] = useState<Stripe.Account | null>(null);

  return (
    <AccountContext.Provider value={{ accountInfo, setAccountInfo }}>
      {children}
    </AccountContext.Provider>
  );
}

export function useAccount() {
  const context = useContext(AccountContext);
  if (!context) {
    throw new Error('useAccount must be used within an AccountProvider');
  }
  return context;
}

在_layout.tsx中包裹路由：

import { ErrorBoundaryProps, Stack, useNavigation } from "expo-router";
import { AccountProvider, useAccount } from "./AccountContext";
import React from "react";

// 自定义Header直接通过useAccount获取数据
const CustomHeader = () => {
  const { accountInfo } = useAccount();
  // Header渲染逻辑...
};

export default function RootLayoutNav() {
  const navigation = useNavigation();

  return (
    <BottomSheetModalProvider>
      <AccountProvider>
        <Stack>
          <Stack.Screen name="index" options={{ header: () => <CustomHeader /> }} />
          <Stack.Screen name="[acctId]/index" options={{ header: () => <CustomHeader /> }} />
          {/* 其他路由配置 */}
        </Stack>
      </AccountProvider>
    </BottomSheetModalProvider>
  );
}

在app/[accId]/index.tsx中更新Context：

import { useLocalSearchParams } from "expo-router";
import React, { useEffect } from "react";
import Stripe from "stripe";
import { useAccount } from "../AccountContext";

const ProviderComponent = (props: any) => {
  const { acctId } = useLocalSearchParams();
  const { setAccountInfo } = useAccount();

  useEffect(() => {
    getAccountById(acctId as string)
      .then((data) => setAccountInfo(data))
      .catch(err => {
        console.error('获取账户信息失败:', err);
        setAccountInfo(null);
      });
    
    // 组件卸载时清空数据
    return () => setAccountInfo(null);
  }, [acctId, setAccountInfo]);

  // 其他组件代码...
};

这个方案适合需要在多个组件间共享数据的场景，比全局状态管理更轻量化，不会影响应用加载速度。

内容的提问来源于stack exchange，提问作者Varun