React Navigation + Native Base => props.navigation.navigate 不是函数答案

【问题标题】：React Navigation + Native Base => props.navigation.navigate is not a functionReact Navigation + Native Base => props.navigation.navigate 不是函数
【发布时间】：2018-05-10 08:09:18
【问题描述】：

我正在尝试使用 Native Base 设置我的 TabNavigator 的样式，但我总是得到“props.navigation.navigate 不是函数”，我不知道为什么。

这是我的 TabNavigator：

import { createBottomTabNavigator } from 'react-navigation';
import React from 'react';
import { Button, Text, Icon, Footer, FooterTab } from 'native-base';

import CameraRouter from './CameraRouter';
import Feed from '../components/Feed';

const MainRouter = createBottomTabNavigator(
  {
    Feed: {
      screen: Feed,
    },
    Camera: {
      screen: CameraRouter,
      navigationOptions: {
        tabBarVisible: false,
      },
    },
  },
  {
    tabBarComponent: props => {
      return (
        <Footer>
          <FooterTab>
            <Button
              vertical
              onPress={() => props.navigation.navigate('Feed')}
            >
              <Icon name="bowtie" />
              <Text>Lucy</Text>
            </Button>
            <Button
              vertical
              onPress={() => props.navigation.navigate('CameraRouter')}
            >
              <Icon name="briefcase" />
              <Text>Nine</Text>
            </Button>
            <Button
              vertical
            >
              <Icon name="headset" />
              <Text>Jade</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
);

export default MainRouter;

我在这里称呼：

import React, { Component } from 'react';
import { YellowBox } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import MainRouter from './config/MainRouter';

import reducers from './reducers';

YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);

class App extends Component {
  render() {
    const store = createStore(reducers);
    return (
      <Provider store={store}>
        <MainRouter />
      </Provider>
    );
  }
}

export default App;

我的代码有什么问题？我使用本指南来了解用法： http://docs.nativebase.io/docs/examples/navigation/StackNavigationExample.html

谢谢你们！

【问题讨论】：

在这方面仍然需要帮助

标签： reactjs react-native react-navigation native-base

【解决方案1】：

如果想用react-navigation 3.0 和native-base 2.13 实现，那么下面的代码将起作用。

 import { createBottomTabNavigator,createStackNavigator,createAppContainer } from 'react-navigation';
  import React from 'react';
  import { Button, Text, Icon, Footer, FooterTab } from 'native-base';

  import Home from './containers/Home';
  import CreateCase from './containers/CreateCase';
  import Profile from './containers/Profile';
  import Performance from './containers/Performance';

  const MainNavigator = createStackNavigator(
    {
        Home : {
            screen: Home,
            navigationOptions: {
              header: null,
            }
          },
      Create:  {
        screen: CreateCase,
        navigationOptions: {
          title: "Generate Case",
        }
      },
    },
    {
      initialRouteName: "Home"
    }
  );

  const Main = createBottomTabNavigator({
      Home: { screen: MainNavigator },
      Profile: { screen: Profile },
      Performance: {screen: Performance}
    },
    {
      tabBarComponent: props => {
        return (
          <Footer>
            <FooterTab>
              <Button
                vertical
                onPress={() => props.navigation.navigate('Home')}
              >
                <Icon name="bowtie" />
                <Text>Lucy</Text>
              </Button>
              <Button
                vertical
                onPress={() => props.navigation.navigate('Profile')}
              >
                <Icon name="briefcase" />
                <Text>Nine</Text>
              </Button>
              <Button
                vertical
              >
                <Icon name="headset" />
                <Text>Jade</Text>
              </Button>
            </FooterTab>
          </Footer>
        );
      }
    }
  );

  export default createAppContainer(Main);

【讨论】：

【解决方案2】：

https://reactnavigation.org/docs/en/navigation-prop.html 该文档提到导航道具并非对每个组件都可用，默认情况下只有屏幕组件具有它。

如果您希望在其他组件中访问此道具，那么您可以将此道具传递给需要它的组件，或者使用所谓的“withNavigation”

【讨论】：

我的组件和屏幕组件有什么区别？
屏幕组件在您的导航器中定义为键值对。
const TabMenu = TabNavigator({ NameOfTab1: { screen: componentToBeDIsplayedAtTab1 }, NameOfTab2: { screen: componentToBeDIsplayedAtTab2 }, NameOfTab3: { screen: componentToBeDIsplayedAtTab3 } },

【解决方案3】：

我认为 props 没有从您的 App 组件传递，您可以试试这个吗？

class App extends Component {
  render() {
    const store = createStore(reducers);
    return (
      <Provider store={store}>
        <MainRouter {...props}/>
      </Provider>
    );
  }
}

export default App;

【讨论】：

感谢您的回答，但 App 组件中没有定义 props
即使使用this.props，我也无法让函数工作

【解决方案4】：

我找到了解决问题的方法：我必须添加一个根 StackNavigator

【讨论】：

你能在这里添加最终的工作代码吗？我正在努力实现这一目标。