Реагировать Навигация + Родная база => props.navigation.navigate не является функцией - PullRequest
Новая
       13

Реагировать Навигация + Родная база => props.navigation.navigate не является функцией

0 голосов
/ 10 мая 2018

Я пытаюсь стилизовать мой TabNavigator с помощью Native Base, но я всегда получаю "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

Спасибо, ребята!

Ответы [ 4 ]

0 голосов
/ 02 августа 2019

, если хотите реализовать с 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);
0 голосов
/ 10 мая 2018

Я думаю, что реквизиты не передаются из вашего компонента приложения, не могли бы вы попробовать это?

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

export default App;
0 голосов
/ 11 мая 2018

Я нашел решение своей проблемы: мне пришлось добавить root StackNavigator

0 голосов
/ 10 мая 2018

https://reactnavigation.org/docs/en/navigation-prop.html В этом документе упоминается, что навигационные реквизиты доступны не для каждого компонента, по умолчанию только компоненты экрана имеют его.

если вы хотите получить доступ к этому реквизиту в других компонентах, вы либо передаете этот реквизит компоненту, где он необходим, либо используете то, что называется ' withNavigation '

...