3566-2

Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

3566-2

himax82

Как передать два параметра для иконки

himax82

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import TabBarIcon from './components/TabBarIcon';

import GithubScreen from './screens/GitHubScreen'
import GitlabScreen from './screens/GitLabScreen'

Dolgov

import * as React from "react";
import { Text, View } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

// Screens
import GitHubScreen from "./screens/GitHubScreen";
import GitLabScreen from "./screens/GitLabScreen";
const Tab = createBottomTabNavigator();
export default function App() {
	return (
		<NavigationContainer>
			<Tab.Navigator
				tabBarOptions={{
					showLabel: false,
				}}
				screenOptions={({ route }) => ({
					tabBarIcon: ({ focused, routeName }) => {
						return <TabBarIcon />;
					},
				})}
			>
				<Tab.Screen name="Github" component={GitHubScreen} />
				<Tab.Screen name="Gitlab" component={GitLabScreen} />
			</Tab.Navigator>
		</NavigationContainer>
	);
}

Никак не могу понять, где ошибка?
@Coderslang_Master помоги

MaxDenisenko

Dolgov
Вот в этом месте не возвращается компонент(TarBarIcon) c параметрами(никакими)

screenOptions={({ route }) => ({
					tabBarIcon: ({ focused, routeName }) => {
						return <TabBarIcon />;
					},
				})}

Solomon

В первом примере ошибка в коде вот тут: {...route, focused}. Если зайти в компонент TabBarIcon и посмотреть что мы сравниваем, то видно что мы сравниваем именно свойство name из route (source={routeName === 'Github' ? github : gitlab}). По этому {...route} использовать нельзя для указания свойства routeName (нужно обратиться именно к свойству name).

screenOptions={({route}) => ({tabBarIcon: ({focused}) => <TabBarIcon routeName={route.name} focused={focused}/>})}