я хочу создать пользовательскую панель поиска и значок уведомления, включая контейнер заголовка для определенной страницы поверх верхней панели навигации, экран должен быть похож на Google Play Store, я пробовал этот код `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;





Если вы используете навигатор стека внутри своей навигации по вкладкам, вы можете установить панель заголовка на своих экранах следующим образом:
<Stack.Navigator screenOptions = {{
header: ({route}) => <YourCustomHeaderBar />
}}>
<Stack.Screen name = {MyScreen} />
</Stack.Navigator>Я добавил представление с flex=1 и интегрировал в него навигацию и панель поиска, и это все, что мне потребовалось.