是否有用于本机反应的“固定标题”或“粘性标题”？

Question

有没有办法让固定和永久的顶部标题栏（我认为它被称为标题栏？）用于本机反应？

几乎就像一个状态栏，它总是在那里。但它需要在顶部（甚至在反应导航的“标题”之前）

我的计划是在那里放置一个全局搜索输入，因此您可以在应用程序中的任何位置进行搜索（搜索内容不受当前显示的屏幕影响。纯全局搜索始终可用。）

有没有办法做到这一点？我目前正在使用 expo 和 react-navigation。

- - 编辑

我添加了显示我的意思的线框屏幕截图。您会注意到，无论您在哪个屏幕上，搜索栏都保持在顶部。这是一个全局搜索栏。

- 编辑

我想我有必要说清楚。我正在尝试使用ReactNavigation做到这一点。我想我需要使用“createAppContainer”或任何像“createDrawerNavigator”这样的创建导航器功能，并找出一种方法来将固定标题与可导航的屏幕一起放入。

Answer 1

React Native 的组件FlastList有一个ListHeaderComponent用于渲染标题的属性和另一个用于粘贴它的属性stickyHeaderIndices。这正是您所需要的。

在ListHeaderComponent您将呈现您的搜索字段并将其stickyHeaderIndices={[0]}设置为粘性标题：

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

查看工作示例。

Answer 2

我自己找到了路。=)

所以关键是引入自定义导航器。

自定义导航器可以扩展我现有的选项卡导航器，并且渲染部分几乎可以返回我想要的任何内容以及我的 TabNavigator 将具有的常规视图。

我的应用程序有抽屉和选项卡导航器。因此，就我而言，抽屉导航器有一堆路线，其中一个路线是扩展 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,
});

附言。如果您希望有一些覆盖 TabNavigator 渲染位置的重叠绝对位置视图，请确保在 iOS 上使用zIndex，在Android 上使用elevation ！就我而言，SearchHeader 组件具有：

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