Je migre un projet RN version 4 vers 5.

J'utilisais l'option tabBarComponent pour remplacer le composant de la barre d'onglets par un composant personnalisé. Anciens documents.

Comment faire la même chose dans la version 5, je ne trouve pas cette option dans le nouveaux documents.

0
haxpanel 24 janv. 2020 à 17:34

1 réponse

Meilleure réponse

Voici la nouvelle méthode API pour obtenir un composant d'onglet personnalisé :

import { View, Text, TouchableOpacity } from 'react-native';

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

// ...

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

Ce lien va sûrement vous aider. https://reactnavigation.org/docs/en/next/ bottom-tab-navigator.html#tabbar

J'espère que cela t'aides. À votre santé!

1
Suraj Malviya 24 janv. 2020 à 14:42