Как реализовать панель поиска для всего приложения?

Question

Кажется довольно распространенной задачей иметь в заголовке панель поиска для всего приложения. К сожалению, я не нашел готовых рецептов того, как правильно сделать sh. Мое решение состояло в том, чтобы поместить пользовательский компонент SearchBox в заголовок React Native Navigation, используя headerTitle:

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

У него были свои недостатки, например, с помощью «stati * 1060». * "переменные для передачи состояния и поведения между приложением и компонентом. Но это сработало до сих пор. Теперь после перехода на RNN 4.1.1 он перестал работать из-за особенностей реализации заголовка в RNN:

TextInput now не заполняет ширину заголовка и не обрабатывает ввод текста должным образом.

Я ищу способ реализовать в приложении панель поиска в RN, которая имеет следующие свойства:

• она отображается в приложении;
• ее содержимое может быть изменено пользователем, который хочет выполнить поиск;
• когда пользователь перемещается назад, его содержимое соответствует отображаемой странице (например, если пользователь набрал запрос на странице A, а затем был перенаправлен на страницу B, поэтому, когда они go возвращаются на страницу A, поле поиска содержит «Страница A», а не введенный ими запрос);
• поддерживает предложения (что тоже сложно).

Обновление

В идеале я ищу ответ, который имеет следующие аспекты:

• be React Navigation v5;
• рассказывает, как реализована панель поиска per se (например, передается как компонент через свойство header в приведенном выше сценарии);
• показывает, как панель поиска взаимодействует с основным приложением в следующем сценарии ios:
  • пользователь отправляет запрос;
  • запрос окна поиска обновляется независимо от приложения (например, пользователь нажимает TouchableOpacity и переходит на новую страницу);
• как обеспечить согласованность запросов во время навигации. Например, когда пользователь возвращается к предыдущему экрану, запрос в строке поиска должен соответствовать содержимому экрана.
• как реализовывать предложения (пользователи могут видеть свои параметры при наборе; параметры загружаются онлайн из удаленного источника ).

Answer 1

Вы почти закончили, но, к сожалению, я думаю, что это невозможно с реакцией навигации 4. В последней версии 5.0, которая теперь готова к производству, вы должны переписать свои стеки.

В 5.0 вы можете использовать useFocusEffect , который приятно обнаруживать Обратные действия . Итак, ваш заголовок выглядит так:

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

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

Проблема в том, что вы должны повторять опции и использовать логи FocusEffect c на каждом экране.

Другой подход может быть:

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 и реализуют логи c в этом функциональном компоненте.