-1

Olá!

Quando adiciono apenas o TabNavigator, todos os ícones aparecem na guia, no entanto, quando adiciono o stackNavigator, no arquivo Home.js, apenas o primeiro ícone (Início) não aparece. Procurei em alguns fóruns e não consigo encontrar o problema. Me ajude, por favor =)

Detalhe: o ícone do simulador de lanches não aparece no IOS.

Acredito que o erro esteja no Home.js ou no HomeList.js.

Siga o link do lanche para uma melhor avaliação.

Desculpe pela ignorância, comecei a estudar reagir nativo há pouco tempo.

Abraço!

https://snack.expo.io/@israelitalo/fcec5d

App.js

import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import 'react-native-gesture-handler';

import Home from './src/Home'
import Contato from './src/Contato'
import Horarios from './src/Horarios'
import Sobre from './src/Sobre'

const TabNavigator = createBottomTabNavigator({
        Home: Home,
        Contato: Contato,
        Horarios: Horarios,
        Sobre: Sobre
});

export default createAppContainer(TabNavigator);

Home.js

import { createAppContainer } from 'react-navigation';
    import { createStackNavigator } from 'react-navigation-stack';

    import 'react-native-gesture-handler';

    import HomeList from './HomeList';
    import HomeProducts from './HomeProducts';

    const Navegador = createStackNavigator({
        HomeList:HomeList,
        HomeProducts:HomeProducts
    });

export default createAppContainer(Navegador);

HomeList.js

import React, { Component } from 'react';
import { View, Image, StyleSheet, Text } from 'react-native';

export default class HomeList extends Component{

    static navigationOptions = {
        title:'Restaurante',
        tabBarLabel:'Home',
        tabBarOptions: {
          showIcon: true  
        },
        tabBarIcon:({focused, tintColor})=>{
            if(focused){
                return(
                    <Image source={require('../assets/images/home_azul.png')} style={styles.icone}/>
                );
            }else{
                return(
                    <Image source={require('../assets/images/home_preto.png')} style={styles.icone}/>
                );
            }
        }
    };

    render(){
        return(
            <View>
                <Text>HomeList</Text>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    icone:{
        width:26,
        height:26
    }
});

package.json

[{
  "name": "informativo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "react": "16.9.0",
    "react-native": "^0.61.5",
    "react-native-gesture-handler": "^1.5.3",
    "react-native-reanimated": "^1.4.0",
    "react-native-safe-area-context": "^0.6.2",
    "react-native-screens": "^2.0.0-alpha.23",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^2.0.14",
    "react-navigation-tabs": "^2.7.0"
  },
  "devDependencies": {
    "@babel/core": "7.8.0",
    "@babel/runtime": "7.8.0",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.4",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}[enter image description here][1]

1 Resposta 1

0

Existem duas formas de fazer isso. A primeira seria configurar as "navigationOptions" do seu Stack Navigator. Agui tem um exemplo:

Arquivo App.js

import React from 'react';
import Routes from './routes';

export default function App() {
  return <Routes />;
}

Arquivo routes.js

import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';
import Icon from 'react-native-vector-icons/MaterialIcons';

import Page1 from './pages/Page1';
import Page2 from './pages/Page2';
import Page3 from './pages/Page3';
import Page4 from './pages/Page4';
import Page5 from './pages/Page5';
import Page6 from './pages/Page6';
import Page7 from './pages/Page7';
import Page8 from './pages/Page8';
import Page9 from './pages/Page9';

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: { screen: createStackNavigator(
        {
          Page5,
          Page6,
          Page7,
          Page8,
          Page9,
        },
        {
          defaultNavigationOptions: {
            header: null,
          },
        },
      ),navigationOptions: {
                tabBarVisible: true,
                tabBarLabel: 'Home',
                tabBarIcon: (
                  <Icon name="home" size={20} color="rgba(255,255,255,0.6)" />
                )
      }},
      Page1,
      Page2,
      Page3,
      Page4,
    },
    {
      resetOnBlur: true,
      tabBarOptions: {
        keyboardHidesTabBar: true,
        activeTintColor: '#FFF',
        inactiveTintColor: 'rgba(255, 255, 255, 0.6)',
        style: {
          backgroundColor: '#00008b',
        },
      },
    },
  ),
);

Perceba que dentro do "TabNavigator" eu tenho um "StackNavigator" na primeira posição, e ele possui dentro 5 telas, de "Page5" a "Page9", estas páginas não vão ter cabeçalho, e vão ter o mesmo ícone.

Uma outra forma de configurar o ícone sem fazer isso, seria, dentro de alguma tela do "StackNavigator", inserir o método estático "navigationOptions". Veja que no exemplo o stack tem uma tela chamada "Page5", se eu não tivesse configurado as "navigationOptions" do "StackNavigator", eu poderia dentro deste arquivo alterar o ícone do "tabNavigator" desta forma:

import React, {Component} from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {Creators as CategoriasActions} from '../store/ducks/categorias';

class Page5 extends Component {

  /Alterar o ícone
  static navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({tintColor}) => (
      <Icon name="home" size={20} color={tintColor} />
    ),
  };

  //Programação do componente

  render() {
    return (
    );
  }
}

const mapStateToProps = state => ({
  categorias: state.categorias,
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(CategoriasActions, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Page5);
4
  • Olá, Bins! Tudo certo? Eu tentei adaptar da forma que você recomendou, mas mesmo assim o ícone Home, não aparece. Só para deixar registrar, da forma que mencionei meu código lá em cima, a navegação da Tab para o Stack ta funcionando ok, entendesse? O problema é que, quando vai para a tela do Stack, o ícone home_azul e home_preto não são chamados, você faz alguma ideia do por quê ele não aparece, apenas nas telas com navegação stack? Agradeço demais tua ajuda. Abraço! 20/01/2020 às 3:19
  • consegui fazer com que o ícone aparecesse, o App.js ficou da seguinte forma e o Home.js foi descartado. 20/01/2020 às 4:06
  • const TabNavigator = createAppContainer( createBottomTabNavigator( { Home: { screen: createStackNavigator( { HomeList, HomeProducts }, ), navigationOptions: { tabBarVisible: true, tabBarLabel: 'Home', tabBarIcon: ({focused, tintColor}) => ( <Image source={require('./assets/images/home_azul.png')} style={styles.icone}/> ) }}, Contato, Horarios, Sobre, }, ), ); 20/01/2020 às 4:12
  • Nesse caso, Bins, eu preciso que quando a tela HomeList não esteja "focused", que o ícone home_azul.png mude para home_preto,png, só que tentei adicionar arrow function e abrindo o {}, mas não deu certo. Você sabe se é possível com o código do jeito que está? Obrigado, meu amigo! Desculpe pelo código acima, não consegui deixar ele organizado como apareceu a opção de quando fui abrir este tópico. 20/01/2020 às 4:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .