Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Melhorando formatação e tags
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

import 'react-native-gesture-handler';
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import AntDesign from 'react-native-vector-icons/AntDesign';
import IconI from 'react-native-vector-icons/Ionicons';
import Home from '../pages/Home';
import Wallet from '../pages/Wallet';
import Pay from '../pages/Pay';

const Routes:React.FC = () => {
    const Tab = createBottomTabNavigator();

    const icons = {
        Home: {
            lib: AntDesign,
            name: 'home'
        },
        Wallet: {
            lib: AntDesign,
            name: 'creditcard'
        },
        Pay: {
            lib: AntDesign,
            name: 'home'
        },
        Notifications: {
            lib: IconI,
            name:'ios-notificaions-outline'
        },
        Config: {
            lib: AntDesign,
            name: 'setting'
        }
    }
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                tabBarIcon: ({color, size}) => {
                    const {} = icons[route.name];
                }
            })}
        >
            <Tab.Screen options={{title:'Inicio'}} name="Home" component={Home} />
            <Tab.Screen options={{title:'Carteira'}} name="Wallet" component={Wallet} />
            <Tab.Screen options={{title:'Pagar'}} name="Pay" component={Pay} />
            <Tab.Screen options={{title:'Notificações'}} name="Notifications" component={Pay} />
            <Tab.Screen options={{title:'Ajustes'}} name="Config" component={Pay} />
        </Tab.Navigator>
    )
}

export default Routes;

import 'react-native-gesture-handler';
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import AntDesign from 'react-native-vector-icons/AntDesign';
import IconI from 'react-native-vector-icons/Ionicons';
import Home from '../pages/Home';
import Wallet from '../pages/Wallet';
import Pay from '../pages/Pay';

const Routes:React.FC = () => {
    const Tab = createBottomTabNavigator();

    const icons = {
        Home: {
            lib: AntDesign,
            name: 'home'
        },
        Wallet: {
            lib: AntDesign,
            name: 'creditcard'
        },
        Pay: {
            lib: AntDesign,
            name: 'home'
        },
        Notifications: {
            lib: IconI,
            name:'ios-notificaions-outline'
        },
        Config: {
            lib: AntDesign,
            name: 'setting'
        }
    }
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                tabBarIcon: ({color, size}) => {
                    const {} = icons[route.name];
                }
            })}
         >
             <Tab.Screen options={{title:'Inicio'}} name="Home" component={Home} />
             <Tab.Screen options={{title:'Carteira'}} name="Wallet" component={Wallet} />
             <Tab.Screen options={{title:'Pagar'}} name="Pay" component={Pay} />
             <Tab.Screen options={{title:'Notificações'}} name="Notifications" component={Pay} />
             <Tab.Screen options={{title:'Ajustes'}} name="Config" component={Pay} />
         </Tab.Navigator>
     )
}

export default Routes;

import 'react-native-gesture-handler';
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import AntDesign from 'react-native-vector-icons/AntDesign';
import IconI from 'react-native-vector-icons/Ionicons';
import Home from '../pages/Home';
import Wallet from '../pages/Wallet';
import Pay from '../pages/Pay';

const Routes:React.FC = () => {
    const Tab = createBottomTabNavigator();

    const icons = {
        Home: {
            lib: AntDesign,
            name: 'home'
        },
        Wallet: {
            lib: AntDesign,
            name: 'creditcard'
        },
        Pay: {
            lib: AntDesign,
            name: 'home'
        },
        Notifications: {
            lib: IconI,
            name:'ios-notificaions-outline'
        },
        Config: {
            lib: AntDesign,
            name: 'setting'
        }
    }
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                tabBarIcon: ({color, size}) => {
                    const {} = icons[route.name];
                }
            })}
        >
            <Tab.Screen options={{title:'Inicio'}} name="Home" component={Home} />
            <Tab.Screen options={{title:'Carteira'}} name="Wallet" component={Wallet} />
            <Tab.Screen options={{title:'Pagar'}} name="Pay" component={Pay} />
            <Tab.Screen options={{title:'Notificações'}} name="Notifications" component={Pay} />
            <Tab.Screen options={{title:'Ajustes'}} name="Config" component={Pay} />
        </Tab.Navigator>
    )
}

export default Routes;

import 'react-native-gesture-handler';
import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import AntDesign from 'react-native-vector-icons/AntDesign';
import IconI from 'react-native-vector-icons/Ionicons';
import Home from '../pages/Home';
import Wallet from '../pages/Wallet';
import Pay from '../pages/Pay';

const Routes:React.FC = () => {
    const Tab = createBottomTabNavigator();

    const icons = {
        Home: {
            lib: AntDesign,
            name: 'home'
        },
        Wallet: {
            lib: AntDesign,
            name: 'creditcard'
        },
        Pay: {
            lib: AntDesign,
            name: 'home'
        },
        Notifications: {
            lib: IconI,
            name:'ios-notificaions-outline'
        },
        Config: {
            lib: AntDesign,
            name: 'setting'
        }
    }
    return (
        <Tab.Navigator
            screenOptions={({route}) => ({
                tabBarIcon: ({color, size}) => {
                    const {} = icons[route.name];
                }
            })}
         >
             <Tab.Screen options={{title:'Inicio'}} name="Home" component={Home} />
             <Tab.Screen options={{title:'Carteira'}} name="Wallet" component={Wallet} />
             <Tab.Screen options={{title:'Pagar'}} name="Pay" component={Pay} />
             <Tab.Screen options={{title:'Notificações'}} name="Notifications" component={Pay} />
             <Tab.Screen options={{title:'Ajustes'}} name="Config" component={Pay} />
         </Tab.Navigator>
     )
}

export default Routes;
Melhorando formatação
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

Criei um projeto com React-Native e TypeScritpt, importei os componentes do React-Navigation e ao usar a propriedade screenOptionsscreenOptions dentro do Navigation ele apresenta o seguinte erro.

No overload matches this call. Overload 1 of 2, '(props: Pick<Props, "children" | "backBehavior" | "lazy" | "tabBar" | "tabBarOptions"> & { initialRouteName?: string; screenOptions?: BottomTabNavigationOptions | ((props: { ...; }) => BottomTabNavigationOptions); }, context?: any): ReactElement<...> | Component<...>', gave the following error.

No overload matches this call.
Overload 1 of 2, '(props: Pick<Props, "children" | "backBehavior" | "lazy" | "tabBar" | "tabBarOptions"> & { initialRouteName?: string; screenOptions?: BottomTabNavigationOptions | ((props: { ...; }) => BottomTabNavigationOptions); }, context?: any): ReactElement<...> | Component<...>', gave the following error.`

Criei um projeto com React-Native e TypeScritpt, importei os componentes do React-Navigation e ao usar a propriedade screenOptions dentro do Navigation ele apresenta o seguinte erro.

No overload matches this call. Overload 1 of 2, '(props: Pick<Props, "children" | "backBehavior" | "lazy" | "tabBar" | "tabBarOptions"> & { initialRouteName?: string; screenOptions?: BottomTabNavigationOptions | ((props: { ...; }) => BottomTabNavigationOptions); }, context?: any): ReactElement<...> | Component<...>', gave the following error.

Criei um projeto com React-Native e TypeScritpt, importei os componentes do React-Navigation e ao usar a propriedade screenOptions dentro do Navigation ele apresenta o seguinte erro.

No overload matches this call.
Overload 1 of 2, '(props: Pick<Props, "children" | "backBehavior" | "lazy" | "tabBar" | "tabBarOptions"> & { initialRouteName?: string; screenOptions?: BottomTabNavigationOptions | ((props: { ...; }) => BottomTabNavigationOptions); }, context?: any): ReactElement<...> | Component<...>', gave the following error.`

No overload matches this call. Overload 1 of 2, '(props: Pick<Props, "children" | "backBehavior" | "lazy" | "tabBar" | "tabBarOptions"> & { initialRouteName?: string; screenOptions?: BottomTabNavigationOptions | ((props: { ...; }) => BottomTabNavigationOptions); }, context?: any): ReactElement<...> | Component<...>', gave the following error.No overload matches this call. Overload 1 of 2, '(props: Pick<Props, "children" | "backBehavior" | "lazy" | "tabBar" | "tabBarOptions"> & { initialRouteName?: string; screenOptions?: BottomTabNavigationOptions | ((props: { ...; }) => BottomTabNavigationOptions); }, context?: any): ReactElement<...> | Component<...>', gave the following error.

Acredito que o erro tenha algo a ver com o próprio TypeScript, pois se o arquivo esta com a extensão .JS.js o erro some, mas com a extensão .JSX.jsx o erro aparece.

No overload matches this call. Overload 1 of 2, '(props: Pick<Props, "children" | "backBehavior" | "lazy" | "tabBar" | "tabBarOptions"> & { initialRouteName?: string; screenOptions?: BottomTabNavigationOptions | ((props: { ...; }) => BottomTabNavigationOptions); }, context?: any): ReactElement<...> | Component<...>', gave the following error.

Acredito que o erro tenha algo a ver com o próprio TypeScript, pois se o arquivo esta com a extensão .JS o erro some, mas com a extensão .JSX o erro aparece.

No overload matches this call. Overload 1 of 2, '(props: Pick<Props, "children" | "backBehavior" | "lazy" | "tabBar" | "tabBarOptions"> & { initialRouteName?: string; screenOptions?: BottomTabNavigationOptions | ((props: { ...; }) => BottomTabNavigationOptions); }, context?: any): ReactElement<...> | Component<...>', gave the following error.

Acredito que o erro tenha algo a ver com o próprio TypeScript, pois se o arquivo esta com a extensão .js o erro some, mas com a extensão .jsx o erro aparece.

Fonte Link
Carregando