如何实现应用程序范围的搜索栏？答案

【问题标题】：How to implement an application-wide search bar?如何实现应用程序范围的搜索栏？
【发布时间】：2020-05-22 23:47:48
【问题描述】：

在标题中有一个应用程序范围的搜索栏似乎是一项非常常见的任务。不幸的是，我还没有找到一些关于如何以正确方式完成它的现成食谱。我的解决方案是使用 headerTitle:

在 React Native Navigation 标头中放置一个自定义 SearchBox 组件

static navigationOptions = ({navigation}) => {
     headerTitle: () => (<SearchBox ... />)

它有它的缺点，例如使用“静态”变量在应用程序和组件之间传递状态和行为。但它到目前为止工作。现在，在迁移到 RNN 4.1.1 后，由于 RNN 中如何实现标头的具体细节，它停止了工作：

TextInput 现在不能填充标题的宽度，也不能正确处理文本输入。

我正在寻找一种在 RN 中实现应用程序范围的搜索栏的方法，它具有以下属性：

它出现在应用程序范围内；
其内容可由想要执行搜索的用户修改；
当用户返回页面时，其内容符合显示的页面（例如，如果用户在页面 A 上键入查询，然后被重定向到页面 B，那么当他们返回页面 A 时，搜索框包含“页面 A " 而不是他们输入的查询）；
它支持建议（这也是一件棘手的事情）。

更新

理想情况下，我正在寻找具有以下方面的答案：

特定于 React Navigation v5；
说明搜索栏是如何实现的本身（例如，在上述场景中，通过 header 属性作为组件传递）；
显示搜索栏在以下场景中如何与核心应用程序通信：
- 用户提交查询；
- 搜索框查询独立于应用程序进行更新（例如，用户点击 TouchableOpacity 并导航到新页面）；
如何在导航期间确保查询的一致性。例如。当用户返回上一个屏幕时，搜索栏中的查询应该与屏幕内容匹配。
如何实施建议（用户可以在输入时看到他们的选项；选项从远程源在线加载）。

【问题讨论】：

我试图减少对赏金的引用，因为一旦赏金到期，该材料就会过时。虽然提供赏金以让更多人关注问题是可以的，但我不确定是否完全符合 Stack Overflow 的精神，制定需要履行的极其详细的工作订单才能获得独角兽积分。我想如果有人可以帮助您解决您提到的任何问题，那就太好了，并且很可能会引导您自己解决其他一些问题。
换句话说，Meta 上有一种观点认为 Stack Overflow 就是提出（和回答）免费工作请求。但可能存在过度要求的情况，提供赏金并不意味着问题的解决应该完全由回答者来解决。这有意义吗？
@halfer 听起来很公平！碰巧我已经在这个问题上工作了一段时间，并试图概述其中最重大的挑战。我希望它会使答案更有条理，正如俗话说的“问对了问题就成功了一半”。

标签： android ios react-native mobile react-navigation

【解决方案1】：

您几乎完成了，但不幸的是，我认为这在 react-navigation 4 中是不可能的。在最新的 5.0 中，现在已经可以生产了，您必须重写您的堆栈。

在 5.0 中，您可以使用useFocusEffect，它可以很好地检测到Back Actions。所以，你的标题是这样的：

function SearchBar(props) {
  return (
    <TextInput />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props => <SearchBar {...props} /> }}
      />
    </Stack.Navigator>
  );
}

问题是，您必须在每个屏幕上重复选项和使用FocusEffect 逻辑。

另一种方法可能是：

全局禁用所有标头
在所有屏幕中，创建如下布局：

      <View style={{ flex: 1 }}>
        <MyAppbarHeader title={'PageA'} resetOnBack={false/true} />
        <View style={{ flex: 1, margin: 8 }}>
          <FlatList
            data={someDataOnMyScreen}
            renderItem={renderItem}
          />
        </View>
      </View>

在MyAppbarHeader 中，您可以将标题作为道具传递，以及其他道具（如resetOnBack）并在此功能组件中实现逻辑。

【讨论】：