Есть ли «фиксированный заголовок» или «липкий заголовок» для реагировать родной?

Question

Есть ли способ иметь фиксированный и проникающий верхний заголовок заголовка (я думаю, что он называется заголовком?) Для реагирования нативного?

Почти как строка состояния, она всегда есть.Но он должен быть наверху (даже до «заголовка» в реагирующей навигации)

Мой план заключался в том, чтобы разместить там глобальный поисковый запрос, поэтому в любом месте приложения вы можете осуществлять поиск (поиск контента)не зависит от экрана, который представлен в данный момент. Чистый глобальный поиск всегда доступен.)

Есть ли способ сделать это?В настоящее время я работаю с экспозицией и реагирующей навигацией.

--- Edit

Я добавляю скриншот каркаса, который показывает, что я имел в виду.Вы заметите, что панель поиска остается в верхней части независимо от того, на каком экране вы находитесь.Это глобальная строка поиска.

- Правка

Думаю, мне нужно четко это сказать.Я пытаюсь сделать это с ReactNavigation .Я думаю, что мне нужно поиграть с «createAppContainer» или любой функцией создания навигатора, например «createDrawerNavigator», и найти способ вставить фиксированный заголовок с помощью экранов, способных перемещаться.

Answer 1

Вам необходимо создать компонент с атрибутом стиля position: 'absolute' (и набор minHeight - высота, на которую вы хотите установить панель поиска).Затем вы можете импортировать его в свой корневой компонент и поместить атрибут стиля marginTop: ... на остальное содержимое вашего приложения (контейнер страницы), равный minHeight, установленному для заголовка / панели поиска.

Таким образом, заголовок будет отображаться на всех страницах, а остальное содержимое вашего приложения не будет отображаться за заголовком.

Вы можете найти базовый пример этого здесь

Answer 2

Я нашел путь сам.=)

Таким образом, ключевой момент состоял в том, чтобы ввести пользовательский навигатор.

Пользовательский навигатор может расширить мой существующий навигатор вкладок, и часть рендеринга может вернуть почти все, что я хочу, плюс обычное представление, что мой TabNavigatorбудет иметь.

У моего приложения есть Навигатор ящиков и вкладок.Так что в моем случае в Навигаторе Drawer есть несколько маршрутов, и одним из маршрутов является Custom Navigator, который расширяет TabNavigator.

Вот мой код:

const MyTab = createBottomTabNavigator({
  FirstTabStack,
  SecondTabStack,
  ThirdTabStack,
  FourthTabStack,
});

class CustomNavigator extends React.Component {
  static router = MyTab.router;
  render() {
    const { navigation } = this.props;

    return (
      {/* This SafeAreaView is from ReactNavigation. 
          forceInset-bottom-never is needed because  the 
          TabNavigator is already Safe-area-ing the bottom. 
          You don't want to do it again.*/}
      <SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
        {/* SearchHeader is zIndex: 1(or elevation: 1) for the absolute 
            positioned stuff that appears and cover the 
            screen after focusing on Input. */}
        <SearchHeader/>
        <MyTab navigation={navigation} />
      </SafeAreaView>
    );
  }
}


export default createDrawerNavigator({
  CustomNavigator,
  SettingsScreen,
  LegalScreen,
  FeedbackScreen,
  VersionScreen,
}, {
  drawerType: 'slide',
  drawerWidth: 260,
});

PS.Если вы хотите иметь перекрывающее покрытие View с абсолютным позиционным положением, в котором отображается TabNavigator, обязательно используйте zIndex для iOS и elevation для Android !!В моем случае компонент SearchHeader имеет:

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        zIndex: 1,
      },
      android: {
        elevation: 1
      },
    }),
  },
  {...}
})

Answer 3

Компонент реагирующего натива FlastList имеет свойство ListHeaderComponent для рендеринга заголовка и еще одно, чтобы прикрепить его stickyHeaderIndices.Это именно то, что вам нужно.

В ListHeaderComponent вы визуализируете свое поле поиска и с помощью stickyHeaderIndices={[0]} установите его как липкий заголовок:

<FlatList
    data={ this.state.data }
    renderItem={({item}) =>  this.renderItem(item)}
    ListHeaderComponent={this.renderHeader}
    stickyHeaderIndices={[0]}
/>

Проверьте работоспособность пример .