Добавление разных кнопок заголовка для разных экранов в реактивных встроенных навигаторах - PullRequest
Новая
       27

Добавление разных кнопок заголовка для разных экранов в реактивных встроенных навигаторах

1 голос
/ 22 марта 2020

Я создал новое реактивное приложение, используя expo и шаблон панели вкладок. Это создает новое приложение, которое содержит навигатор стека, который, в свою очередь, содержит навигатор вкладок. Примерно так, как они объясняют в Вложенные навигаторы .

Так это выглядит так:

  • Stack.Navigator
    • Tab (Tab.Navigator )
      • Поиск (Экран)
      • Чат (Экран)
      • Посетители (Экран)
      • Настройки (Экран)

Я хочу добавить кнопки на панель заголовка, но в зависимости от того, какая вкладка активна, мне нужны разные кнопки. Например, когда на экране поиска мне нужна «кнопка фильтра». На экране чата мне нужна «кнопка нового сообщения».

Как я могу это сделать? До сих пор я только узнал, как добавить в заголовок кнопки, которые затем отображаются на всех экранах:

Из приложения. js: 

            <NavigationContainer ref={containerRef} initialState={initialNavigationState}>
               <Stack.Navigator>
                  <Stack.Screen
                     name="Suche"
                     component={BottomTabNavigator}
                     options={{
                        headerStyle: {
                           backgroundColor: '#2270b9'
                        },
                        headerTitleStyle: {
                           color: 'white'
                        },
                        headerRight: () => (
                           <View style={{ flex: 1, flexDirection: 'row' }}>
                              <Ionicons
                                 style={{ color: 'white', marginRight: 15, marginTop: 5 }}
                                 size={32}
                                 onPress={() => alert('This is a button!')}
                                 name="md-settings"
                                 backgroundColor="#CCC"
                              />
                           </View>
                        ),
                     }}
                  />
               </Stack.Navigator>
            </NavigationContainer>

Однако Я не могу найти способ добавить это на отдельные экраны BottomTabNavigator.

Когда я пытаюсь добавить то же самое на экраны BottomTabNavigator, вот так: 

    <BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
      <BottomTab.Screen
        name="Suche"
        component={Search}
        options={{
            title: 'Suche',
            tabBarIcon: ({ focused }) => <TabBarIcon focused={focused} name="md-search" />,
            headerRight: () => (
               <View style={{ flex: 1, flexDirection: 'row' }}>
                  <Ionicons
                     style={{ color: 'white', marginRight: 15, marginTop: 5 }}
                     size={32}
                     onPress={() => alert('This is a button!')}
                     name="md-settings"
                     backgroundColor="#CCC"
                  />
               </View>
            ),
        }}
      />
      // more screens
    </BottomTab.Navigator>

Просто ничего не происходит.

Как я могу это сделать?

...