如何在 React Native 顶部导航顶部添加自定义容器栏

Question

我想为顶部栏导航顶部的特定页面创建自定义搜索栏和通知图标，包括 header 容器，屏幕应该类似于 google playstore ，我一直在尝试这个代码`const

findScreen = ({navigation}) => {
    
    return (
        <View>
            <View style={{flexDirection:"row",justifyContent:'space- 
                 between',padding:10}}>
                  <Searchbar
                     placeholder="Search "
                      inputStyle={{fontSize:15}}
                      style={{
                     borderRadius:20,width:'85%'}}
                    />
                    <TouchableOpacity
                    style={{
                        padding:5,
                    }}> 
                    
                        <FontAwesome5
                                    name={'bell'}
                                    size={30}
                                    color={'#000'}
                               
                                />

                     </TouchableOpacity>
                                
        </View>
<View>
     <App/>
</View>
   

        </View>
    )
}

使用下面提到的导航代码

const MyTabs = () => {
  return (

    <Tab.Navigator 
    sceneContainerStyle={props => <MyTabBar {...props} />}

    tabBarOptions= {{
      activeTintColor: '#e91e63',
      labelStyle: {
        fontSize: 12,
      },
      scrollEnabled:true,
      
    }}
    >
    <Tab.Screen name="Home" component={AppHomeScreen} />
      <Tab.Screen name="Clothing" component={AppCategoryScreen} />
      <Tab.Screen name="Learning" component={AppCategoryScreen} />
      <Tab.Screen name="Daily Life" component={AppCategoryScreen} />
      <Tab.Screen name="Category" component={AppCategoryScreen} />
      <Tab.Screen name="Service" component={AppCategoryScreen} />
    </Tab.Navigator>

  );
}

export default MyTabs;

我没有得到想要的输出。

Answer 1

如果您在选项卡导航中使用堆栈导航器，您可以像这样在屏幕上设置 header 栏：

<Stack.Navigator screenOptions={{
header: ({route}) => <YourCustomHeaderBar />
}}>
  <Stack.Screen name={MyScreen} />
</Stack.Navigator>

Answer 2

我确实添加了一个 flex=1 的视图，并在其下集成了导航栏和搜索栏，仅此而已

如何在 React Native 顶部导航顶部添加自定义容器栏

how to add custom container bar on top of react native top navigation

reactjs

react-native

react-native-navigation

react-navigation