Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Swipeable TabScreen

Aberta
#737 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
2/5
Tempo estimado
1-3 horas
Facilidade para iniciantes
35/100
Tipo de issue
Documentação
Clareza
Precisa de esclarecimento
Status de atividade
Estagnada
Stack de tecnologia
javascript, react-native

Direção de pesquisa

Comece verificando a documentação de Tab.Navigator e as orientações existentes de navegação para Android/iOS relacionadas à configuração de gestos de deslize. Considera-se concluído quando estiver claramente documentado se a navegação por deslize é compatível e, em caso afirmativo, onde a configuração ou o exemplo necessário deve ser incluído.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

How can I enable swipe in TabScreen?
I want to change screens when the user swipes on it in (Android and IOS).
Is there any property that I am missing?

<Tab.Navigator
      initialRouteName="home"
      tabBarOptions={{
        keyboardHidesTabBar: true,
      }}
      tabBar={props => <CustomBottomBar {...props} />}>
      <Tab.Screen
        name="home"
        component={HomeScreen}
        options={{
          tabBarLabel: 'Abc',
        }}
      />
      <Tab.Screen
        name="splash"
        component={SplashScreen}
        options={{
          tabBarLabel: 'Xyz',
        }}
      />
    </Tab.Navigator>

function CustomTabBar({ 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,
            canPreventDefault: true,
          });

          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>
  );
}
Linguagem predominante
JavaScript
Estrelas
324
Forks
2k
Métricas de merge de PRs
Nenhum PR com merge em 30d

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de react-navigation/react-navigation.github.io

Todas as issues de react-navigation/react-navigation.github.io

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.