Question

我正在尝试使用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

谢谢你们！

Answer 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);

Answer 2

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

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

Answer 3

我认为道具没有从你的App组件中传递出去，你能尝试一下吗？

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

export default App;

Answer 4

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

React Navigation + Native Base =＆gt; props.navigation.navigate不是一个函数

4 个答案: