`useSearchParams` (React Native)

此為 React Native 的 useSearchParams 版本。對於網頁版，請前往此處。

類型宣告

declare function useSearchParams(
  defaultInit?: URLSearchParamsInit
): [URLSearchParams, SetURLSearchParams];

type ParamKeyValuePair = [string, string];

type URLSearchParamsInit =
  | string
  | ParamKeyValuePair[]
  | Record<string, string | string[]>
  | URLSearchParams;

type SetURLSearchParams = (
  nextInit?:
    | URLSearchParamsInit
    | ((prev: URLSearchParams) => URLSearchParamsInit),
  navigateOpts?: : NavigateOptions
) => void;

interface NavigateOptions {
  replace?: boolean;
  state?: any;
  preventScrollReset?: boolean;
}

useSearchParams 勾子用於讀取和修改當前位置的 URL 中的查詢字串。如同 React 本身的 useState 勾子，useSearchParams 會傳回一個陣列，其中包含兩個值：當前位置的查詢參數以及一個可供更新查詢參數的函式。如同 React 的 useState 勾子，setSearchParams 也支援函式式更新。因此，你可以提供一個函式，該函式接收 searchParams 並傳回一個更新版本。

import * as React from "react";
import { View, SearchForm, TextInput } from "react-native";
import { useSearchParams } from "react-router-native";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();
  let [query, setQuery] = React.useState(
    searchParams.get("query")
  );

  function handleSubmit() {
    setSearchParams({ query });
  }

  return (
    <View>
      <SearchForm onSubmit={handleSubmit}>
        <TextInput value={query} onChangeText={setQuery} />
      </SearchForm>
    </View>
  );
}

useSearchParams (React Native)

`useSearchParams` (React Native)