Реагируйте с навигацией (v5): пользовательские кнопки заголовка для заданного экрана c - PullRequest
Новая
       11

Реагируйте с навигацией (v5): пользовательские кнопки заголовка для заданного экрана c

0 голосов
/ 10 апреля 2020

Мне нужно поставить кнопки на заголовке во вкладке навигации. Каждая вкладка может иметь разные кнопки в заголовке, и кнопки должны взаимодействовать с самим экраном. Например, в моем приложении для путешествий на первой вкладке у меня будет кнопка карты в заголовке, которая будет переключать вид карты / списка, а на вкладке списка пожеланий у меня будет кнопка плюса в заголовке.

Когда это стандартный экран (не вкладка), добавить кнопку, которая взаимодействует с экраном, легко и можно, как описано в: https://reactnavigation.org/docs/header-buttons#header -взаимодействие с компонентом-экраном . Однако это не работает для экранов под вкладками. Я нашел эту документацию https://reactnavigation.org/docs/screen-options-resolution о том, как изменить заголовок и стиль заголовка при навигации по вкладкам, но я не могу найти никакой информации о том, как добавить кнопки таким образом, чтобы они могли взаимодействовать с экраном, поскольку компонент которые определяют вкладки отличается от компонента экрана.

1 Ответ

0 голосов
/ 10 апреля 2020

Вы можете добавить Tab Bar Compo nnet, используя команду prop: "tabBar" в реагирующей навигации V5. Вы можете сделать так: 

<Tab.Navigator
          animationEnabled={false}
          swipeEnabled={true}
          tabBar={props => <TabBarComp {...props} />}
          tabBarOptions={{
            // scrollEnabled: true,
            activeTintColor: '#3684F6', //'rgb(12,157,197)',
            inactiveTintColor: 'black',
            indicatorStyle: {
              backgroundColor: '#ACACAC',
            },
            labelStyle: {
              fontSize: 16,
              color: 'black',
            },
            style: {
              backgroundColor: 'white',
            },
            statusBarStyle: 'light-content',
          }}>
        
                  <Tab.Screen name={'tabName} component={screenName} />
        </Tab.Navigator>

Я тоже так делаю, компонент панели вкладок выглядит так: 

import React from 'react';
import {View, TouchableOpacity, ScrollView, Dimensions} from 'react-native';
import Animated from 'react-native-reanimated';
import {colors, fonts} from '../../res';
import {setValueBasedOnHeight, setFontSize} from '../../utils/deviceDimensions';

export const TabBarComp = ({state, descriptors, navigation, position}) => {
  const isIpad = Dimensions.get('window').width > 500 ? true : false;
  return (
    <View>
      <ScrollView
        showsHorizontalScrollIndicator={false}
        horizontal
        style={{
          width: '100%',
          backgroundColor: colors.white,
        }}
        contentContainerStyle={{
          flexGrow: 1,
        }}>
        {state.routes.map((route, index) => {
          const {options} = descriptors[route.key];
          console.log({options});
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;

          console.log({label});

          const isFocused = state.index === index;
          console.log({isFocused});
          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
              canPreventDefault: true,
            });
            console.log('route.name', route.name);
            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          const inputRange = state.routes.map((_, i) => i);
          const opacity = Animated.interpolate(position, {
            inputRange,
            outputRange: inputRange.map(i => (i === index ? 1 : 0.5)),
          });

          return (
            <TouchableOpacity
              accessibilityRole="button"
              accessibilityStates={isFocused ? ['selected'] : []}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              style={{
                backgroundColor: colors.whiteColor,
                borderBottomColor: colors.grayColor,
                borderBottomWidth: isFocused ? 0.5 : 0,
                flex: 1,
                justifyContent: 'center',
              }}>
              <Animated.Text
                style={{
                  color: colors.grayColor,
                  fontSize: setFontSize(14),
                  paddingHorizontal: 20,
                  alignSelf: 'center',
                  fontFamily: fonts.avenirNextBold,
                  paddingVertical: 10,
                  minWidth: '35%',
                  opacity,
                }}>
                {label}
              </Animated.Text>
            </TouchableOpacity>
          );
        })}
      </ScrollView>
    </View>
  );
};

this.props.navigation.setOptions({
      headerTitle: (
        <Text
          style={[
            {color: 'white'},
            {fontSize: 22},
            {fontFamily: fonts.avenirNextDemiBold},
          ]}>
          Privacy Policy
        </Text>
      ),
      headerStyle: {
        borderBottomWidth: 0,
        backgroundColor: colors.navBarHeaderColor,
      },
      headerTintColor: colors.whiteColor,
    });
...