反應導航-底部導航

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}
    />

試試看，並檢查您的代碼和此代碼之間的區別。

希望它會有所幫助。