反应原生是否有“固定标题”或“粘性标题”？

Question

有没有办法让反应原生的固定和渗透顶部标题栏（我认为它被称为标题？）？

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

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

有没有办法做到这一点？我目前正在使用世博会和反应导航。

---编辑

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

- 编辑

我想我需要清楚地说出来。我试图用ReactNavigation做到这一点。我想我需要使用'createAppContainer'，或任何创建导航器函数，如'createDrawerNavigator'，并想出一种方法，可以使用可导航屏幕放入固定标题。

Answer 1

反应本机的组件FlastList有一个属性ListHeaderComponent用于渲染标题，另一个用于粘贴它stickyHeaderIndices。这正是您所需要的。

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

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

看看工作的example。

Answer 2

您需要使用position: 'absolute'样式属性创建一个组件（以及设置minHeight - 您希望搜索栏的高度）。然后，您可以在根级别组件中导入它，并将marginTop: ...样式属性放在应用程序内容的其余部分（页面容器）上，该属性等于您为标题/搜索栏设置的minHeight。

这样，标题将显示在所有页面上，而应用程序内容的其余部分将不会显示在标题后面。

你可以找到这个here的基本例子

Answer 3

我找到了自己的方式。 =）

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

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

我的应用程序有Drawer和Tab Navigator。所以在我的情况下，Drawer 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。如果你想要覆盖绝对位置的视图覆盖TabNavigator的渲染位置，请确保使用zIndex for iOS，以及提升Android！就我而言，SearchHeader组件具有：

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