React-навигация - нижняя навигация

Question

Я использую следующий компонент: https://github.com/timomeh/react-native-material-bottom-navigation

Вместе с React-навигацией.

Я не понимаю, почему вы не видите выбранный компонент на основе сцены.

Похоже на createStackNavigator, он не работает должным образом и сцена не отображается.

Где я делаю не так?

Код:

ссылка: 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

Я думаю, что вы в основном ошибаетесь в компоненте BottomNavigation. Согласно документу необходимо установить следующий код

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

Попробуйте и проверьте разницу между вашим кодом и этим кодом.

Надеюсь, это поможет.