如何在React Navigation中将搜索栏输入作为Props传递到搜索页面？

下面提供三种实用方案，实现将头部SearchBar的输入内容传递到SearchScreen页面：

方案一：状态提升到导航父组件 #

这是最直观的方式，将搜索状态托管在StackNavigator的父组件中，同时传递给SearchBar和SearchScreen。

步骤1：在父组件维护搜索状态 #

// 比如App.js
import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import StackNavigator from './StackNavigator';

export default function App() {
  const [searchQuery, setSearchQuery] = useState('');
  const onChangeSearch = (query) => setSearchQuery(query);

  return (
    <NavigationContainer>
      <StackNavigator 
        searchQuery={searchQuery}
        onChangeSearch={onChangeSearch}
      />
    </NavigationContainer>
  );
}

步骤2：修改StackNavigator传递状态 #

// StackNavigator.js
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
import SearchScreen from './SearchScreen';
import SearchBar from './components/SearchBar';

export default function StackNavigator({ searchQuery, onChangeSearch }) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="SearchScreen"
        options={{ 
          headerTitle: (props) => <SearchBar 
            {...props} 
            searchQuery={searchQuery}
            onChangeSearch={onChangeSearch}
          /> 
        }}
      >
        {/* 直接将搜索状态作为props传给SearchScreen，实时更新 */}
        {(props) => <SearchScreen {...props} searchQuery={searchQuery} />}
      </Stack.Screen>
    </Stack.Navigator>
  );
}

步骤3：在SearchScreen中使用 #

// SearchScreen.js
export default function SearchScreen({ searchQuery }) {
  // 直接使用searchQuery，内容会随输入实时更新
  return (
    // 你的页面内容
  );
}

方案二：使用React Context #

适合跨多层组件共享状态的场景，无需逐层传递props。

步骤1：创建搜索上下文 #

// context/SearchContext.js
import { createContext, useContext, useState } from 'react';

const SearchContext = createContext();

export function SearchProvider({ children }) {
  const [searchQuery, setSearchQuery] = useState('');
  const onChangeSearch = (query) => setSearchQuery(query);

  return (
    <SearchContext.Provider value={{ searchQuery, onChangeSearch }}>
      {children}
    </SearchContext.Provider>
  );
}

export function useSearch() {
  return useContext(SearchContext);
}

步骤2：用Provider包裹导航 #

// App.js
import { SearchProvider } from './context/SearchContext';
import { NavigationContainer } from '@react-navigation/native';
import StackNavigator from './StackNavigator';

export default function App() {
  return (
    <SearchProvider>
      <NavigationContainer>
        <StackNavigator />
      </NavigationContainer>
    </SearchProvider>
  );
}

步骤3：修改SearchBar消费上下文 #

// components/SearchBar.js
import { useSearch } from '../context/SearchContext';
import { Searchbar } from "react-native-paper";
import FontAwesome from '@expo/vector-icons/FontAwesome';

export default function SearchBar(props) {
  const { searchQuery, onChangeSearch } = useSearch();

  return (
    <Searchbar
      {...props}
      placeholder="Search"
      onChangeText={onChangeSearch}
      value={searchQuery}
      loading={false} {/* 注意：loading应该是布尔值，不是字符串"true" */}
      icon={() => <FontAwesome name="search" size={15} />}
      style={{
        backgroundColor: "white",
        borderWidth: 0,
        shadowColor: "transparent",
        borderBottomColor: "transparent",
        borderTopColor: "transparent",
      }}
    />
  );
}

步骤4：在SearchScreen中获取状态 #

// SearchScreen.js
import { useSearch } from '../context/SearchContext';

export default function SearchScreen() {
  const { searchQuery } = useSearch();
  // 实时获取搜索输入内容
  return (
    // 你的页面内容
  );
}

方案三：使用导航的setParams方法 #

利用React Navigation的路由参数机制传递数据，无需额外状态管理。

步骤1：修改SearchBar更新路由参数 #

// components/SearchBar.js
import { useState } from 'react';
import { useNavigation } from '@react-navigation/native';
import { Searchbar } from "react-native-paper";
import FontAwesome from '@expo/vector-icons/FontAwesome';

export default function SearchBar(props) {
  const [searchQuery, setSearchQuery] = useState('');
  const navigation = useNavigation();

  const onChangeSearch = (query) => {
    setSearchQuery(query);
    // 更新当前页面的路由参数
    navigation.setParams({ searchQuery: query });
  };

  return (
    <Searchbar
      {...props}
      placeholder="Search"
      onChangeText={onChangeSearch}
      value={searchQuery}
      loading={false}
      icon={() => <FontAwesome name="search" size={15} />}
      style={{
        backgroundColor: "white",
        borderWidth: 0,
        shadowColor: "transparent",
        borderBottomColor: "transparent",
        borderTopColor: "transparent",
      }}
    />
  );
}

步骤2：在SearchScreen中监听参数变化 #

// SearchScreen.js
import { useRoute } from '@react-navigation/native';
import { useEffect, useState } from 'react';

export default function SearchScreen() {
  const route = useRoute();
  const [searchQuery, setSearchQuery] = useState(route.params?.searchQuery || '');

  // 监听路由参数变化，实时更新本地状态
  useEffect(() => {
    setSearchQuery(route.params?.searchQuery || '');
  }, [route.params]);

  // 使用searchQuery
  return (
    // 你的页面内容
  );
}

注意点 #

• 原代码中loading="true"是字符串类型，需要改为布尔值loading={true}或loading={false}，否则会引发异常。

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