TabNavigator ajustes

Mobile
#1

TabNavigator

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { StackNavigationProp } from "@react-navigation/stack";
import React from "react";
import { Image } from "react-native";
import { RootNavigator } from "../App";
import Login from "../screens/Login";
import HomeScrollView from "./HomeScrollView";

const AppTab = createBottomTabNavigator();

interface Props {
  pagina: number;
  navigation: StackNavigationProp<RootNavigator, "Login">;
}

const TabNavigator: React.FC<Props> = ({ pagina, navigation }) => {
  return (
    <AppTab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({}) => {
          if (route.name === "Início") {
            return <Image source={require("../assets/home_clicado.png")} />;
          } else if (route.name === "Assistência") {
            return <Image source={require("../assets/assistencia.png")} />;
          } else if (route.name === "Perfil") {
            return <Image source={require("../assets/perfil.png")} />;
          }
        },
      })}
      tabBarOptions={{
        keyboardHidesTabBar: true,
        allowFontScaling: true,
        tabStyle: {
          height: 55,
          backgroundColor: "#009CF5",
        },
        labelStyle: {
          color: "#FFFFFF",
          fontSize: 13,
          fontStyle: "normal",
          fontWeight: "400",
          lineHeight: 14,
          alignItems: "center",
          textAlign: "center",
          paddingVertical: 0,
          marginTop: 0,
          marginLeft: 0,
          marginRight: 0,
          paddingHorizontal: 0,
          fontFamily: "Roboto-Regular",
        },
        adaptive: false,
      }}
    >
      <AppTab.Screen name="Início" component={HomeScrollView} />
      <AppTab.Screen name="Assistência" component={Login} />
      <AppTab.Screen name="Perfil" component={Login} />
    </AppTab.Navigator>
  );
};

export default TabNavigator;

FaleConosco

import { NavigationContainer } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";
import React from "react";
import { Image, View } from "react-native";
import { RootNavigator } from "../App";
import TabNavigator from "../componentes/TabNavigator";
import TopoPaginaUsuarioLogado from "../componentes/TopoPaginaUsuarioLogado";

interface Props {
  navigation: StackNavigationProp<RootNavigator, "Login">;
}

const FaleConosco: React.FC<Props> = ({ navigation }) => {
  return (
    <View style={{ flex: 1 }}>
      <TopoPaginaUsuarioLogado
        apereceBotaoVoltar={true}
        titulo={"Fale conosco"}
        navigation={navigation}
      ></TopoPaginaUsuarioLogado>
      <Image
        style={{
          alignSelf: "center",
          marginTop: 95,
          marginLeft: 32,
          marginRight: 32,
          marginBottom: 32,
        }}
        source={require("../assets/faleConosco.png")}
      />
      <NavigationContainer independent={true}>
        <TabNavigator pagina={1} navigation={navigation} />
      </NavigationContainer>
    </View>
  );
};

export default FaleConosco;

Sempre quando chamo a rota FaleConosco, ele j[a carrega a pagina que esta aqui

<AppTab.Screen name=“Início” component={HomeScrollView} />

O que nao deveria. Como fazer com que isto não acontece ?

Outra dúvida é aqui.

Como coloco para carregar duas imagens

if (route.name === "Início") {
    return <Image source={require("../assets/home_clicado.png")} />;
} else if (route.name === "Assistência") {
    return <Image source={require("../assets/assistencia.png")} />;
} else if (route.name === "Perfil") {
    return <Image source={require("../assets/perfil.png")} />;
}

Quando clicar na assistência trocar a imagem de <Image source={require("../assets/assistencia.png")} />; para <Image source={require("../assets/assistencia_clidado.png")} />;

Quando clicar na Perfil trocar a imagem de <Image source={require("../assets/perfil.png")} />; para <Image source={require("../assets/perfil_clicado.png")} />;

Quando clicar na Início trocar a imagem de <Image source={require("../assets/home.png")} />; para <Image source={require("../assets/home_clicado.png")} />;