useLocalSearchParams 在 expo-router 中不起作用

Question

我有以下带有来自 expo-router 的路由器的 React Native 组件：

  <TouchableOpacity
    onPress={() => router.push({ pathname: `//${category}/${type}`})}
    activeOpacity={0.7}
  >

在一个名为 [recentSearch].js 的单独文件中，按以下方式嵌套：

• 应用程序
  • index.js
  • [recentSearch.js]

我有以下代码：

const RecentSearches = () => {
  const { category, type } = useLocalSearchParams();
  console.log(category, type);


  return (
    <>
      <Text>Recent Searches</Text>
    </>
  );
};

export default RecentSearches;

无论我尝试什么，console.log 总是返回“未定义未定义”。我什至尝试过使用 {pathname: '/', params: {category: 'test", type: 'test'} 但由于某种原因 useLocalSearchParams 和 useGlobalSearchParams 不起作用。任何帮助都会很棒。TIA

Answer 1

我遇到了同样的问题，也许是结构问题，我这样做了

• 在 app /app/new_folder 中创建一个新文件夹
• 将文件夹添加到堆栈内的 app/_layout

function RootLayoutNav() {
  const colorScheme = useColorScheme();
  const theme = colorScheme === "dark" ? darkTheme : lightTheme;
  SystemUI.setBackgroundColorAsync(theme.colors.background);
  return (
    <ThemeProvider value={theme}>
      <SessionProvider>
        <ItemsProvider>
          <Stack
            screenOptions={{
              headerShown: false,
              animation: "slide_from_right",
            }}
          >
            <Stack.Screen name="posts" />
          </Stack>
        </ItemsProvider>
      </SessionProvider>
    </ThemeProvider>
  );
}

你可以看到，我在“posts”文件夹中添加了“posts”文件夹，创建 _layout 文件和 [] 文件，例如 [item].tsx 或类似的文件，在您的情况下为 [recentSearch].tsx 或 [recentSearch]。 js，我可以看到[]里面有.js，你必须放在外面。

之后，只需使用 expo router 调用您的文件，例如：

router.push(`/posts/${category}`);

记住，如果你想传递更多参数，你必须这样做：

router.push(`/posts/${category}?type=${type}`);

类似于我们过去在http url 中传递参数的方式。

之后，只需捕获 [].tsx 文件中的参数，使用：

const { category, type } = useLocalSearchParams<{
    category: string;
    type?: string;
  }>();

你可以在expo-router doc找到更多相关信息，只需关注代码注释，有有用的信息

我希望它有帮助，对我的英语感到抱歉