反应导航-底部导航

Question

I am using the following component: https://github.com/timomeh/react-native-material-bottom-navigation

Together with React-navigation.

I'm not understanding why you do not see the selected component based on the scene.

It looks like createStackNavigator, it is not working properly and the scene is not displayed.

Where am I doing wrong?

Code:

link: https://snack.expo.io/BkTIip_fQ

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

import BottomNavigation, {
  FullTab,
} from 'react-native-material-bottom-navigation';

import {
  StackActions,
  NavigationActions,
  createStackNavigator,
} from 'react-navigation';

import Explore from './Components/Explore';
import Cerca from './Components/Cerca';
import Profilo from './Components/Profilo';

const AppNavigator = createStackNavigator({
  Explore: {
    screen: Explore,
  },
  Cerca: {
    screen: Cerca,
  },
  Profilo: {
    screen: Profilo,
  },
});

export default class App extends Component {
  tabs = [
    {
      key: 'Explore',
      icon: 'compass',
      label: 'Explore',
      barColor: '#388E3C',
      pressColor: 'rgba(255, 255, 255, 0.16)',
    },
    {
      key: 'Cerca',
      icon: 'search-web',
      label: 'Cerca',
      barColor: '#4589F2',
      pressColor: 'rgba(255, 255, 255, 0.16)',
    },
    {
      key: 'Profilo',
      icon: 'account-circle',
      label: 'Profilo',
      barColor: '#E64A19',
      pressColor: 'rgba(255, 255, 255, 0.16)',
    },
  ];

  renderIcon = icon => ({ isActive }) => (
    <Icon size={24} color="white" name={icon} />
  );

  renderTab = ({ tab, isActive }) => (
    <FullTab
      isActive={isActive}
      key={tab.key}
      label={tab.label}
      renderIcon={this.renderIcon(tab.icon)}
    />
  );

  handleTabPress = newTab => {
    this.navigator &&
      this.navigator.dispatch(
        StackActions.reset({
          index: 0,
          actions: [NavigationActions.navigate({ routeName: newTab.key })],
        })
      );
  };

  render() {
    return (
      <View>
        <AppNavigator
          ref={nav => {
            this.navigator = nav;
          }}
        />
        <BottomNavigation
          activeTab={this.navigator.state.routeName}
          renderTab={this.renderTab}
          tabs={this.tabs}
          onTabPress={this.handleTabPress}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({});

Answer 1

I think you main wrong thing you are doing is in the BottomNavigation component. As per document you need to set following code

<BottomNavigation
      onTabPress={newTab => this.setState({ activeTab: newTab.key })}
      renderTab={this.renderTab}
      tabs={this.tabs}
    />

Try it and check the difference between your code and this code.

Hope it will help.