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

Question

在标题中有一个应用程序范围的搜索栏似乎是一项非常常见的任务。不幸的是，我还没有找到一些关于如何以正确的方式完成它的现成食谱。我的解决方案是使用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 并导航到新页面）；
• 如何保证导航过程中查询的一致性。例如，当用户返回上一屏幕时，搜索栏中的查询应与屏幕内容相匹配。
• 如何实施建议（用户可以在打字时看到他们的选项；选项是从远程源在线加载的）。

Answer 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 逻辑。

另一种方法可能是：

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

      <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）并在此功能组件中实现逻辑。