Как настроить жест и анимацию смахивания в материале TopTapNavigator? - PullRequest
Новая
       57

Как настроить жест и анимацию смахивания в материале TopTapNavigator?

1 голос
/ 23 сентября 2019

Я пытался поместить жест смахивания, и анимация в моей верхней вкладке в реагирует на нативную, но ни один из реквизитов, которыми обладает TabNavigatorConfig, не вносит никаких изменений в конечный результат при использовании. 

import React from 'react'
import { createMaterialTopTabNavigator } from 'react-navigation-tabs'
import { createAppContainer } from 'react-navigation'

import Manual from './TelaManual'
import Contato from './TelaContatos'

export default class TelaMain extends React.Component {
    static navigationOptions = {
        headerTitle: 'Torneiras'
    }
    render() {
        return (
            <TabsContainer />
        )
    }
}

const Tabs = createMaterialTopTabNavigator(
    {
        'Meus Manuais': Manual,
        Contato: Contato,
    },
    {
        tabBarOptions: {
            style: {
                backgroundColor: '#c0ccda',
            },
            indicatorStyle:{
                borderBottomColor: '#1e2d3e',
                borderBottomWidth: 2
            },
        },
        navigationOptions: {
            swipeEnabled: true,

        }
        // swipeEnabled: true,
    }
)

const TabsContainer = createAppContainer(Tabs)

Как я могу включить его в своем коде?Я пытался использовать оба способа: опора в TabNavigatorConfig, swipeEnable и опора swipeEnable внутри navigationOptions.

1 Ответ

0 голосов
/ 23 сентября 2019

swipeEnabled - это опора в TabBarNavigation, а не внутри navigationOptions

...
const TabScreen = createBottomTabNavigator({
  Home: Home,
  Info: Info
}, {
  initialRouteName: 'Home',
  swipeEnabled: true,
  animationEnabled: true,
  tabBarOptions: {
    activeBackgroundColor: '#fff',
    inactiveBackgroundColor: '#fff',
    activeTintColor: '#405BDB',
    inactiveTintColor: '#9B9B9B'
  },

См. Дополнительные параметры https://reactnavigation.org/docs/en/material-top-tab-navigator.html#docsNav

...