是否有用于 React Native 的“固定标头”或“粘性标头”？

Question

有没有办法为本机反应提供固定和渗透的顶部标题栏（我认为它被称为标题？）？

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

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

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

- - 编辑

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

- 编辑

我想我需要把这个说清楚。我正在尝试使用 ReactNavigation 来做到这一点。我认为我需要使用“createAppContainer”或任何创建导航器函数（如“createDrawerNavigator”），并想出一种方法来将固定标题放入可导航屏幕。

原文由 Andre Song 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我自己找到了方法。 =)

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

Custom Navigator 可以扩展我现有的 Tab Navigator，并且渲染部分几乎可以返回我想要的任何内容加上我的 TabNavigator 将具有的常规视图。

我的应用程序有抽屉和标签导航器。所以在我的例子中，Drawer Navigator 有一堆路线，其中一条路线是扩展 TabNavigator 的 Custom Navigator。

这是我的代码：

 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 渲染的地方有一些覆盖绝对位置的视图，确保使用 zIndex for iOS，和 elevation for Android！就我而言，SearchHeader 组件具有：

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

原文由 Andre Song 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

查看工作 示例。

原文由 Hristo Eftimov 发布，翻译遵循 CC BY-SA 4.0 许可协议