Добавление обработчика событий в createBottomTabNavigator из React Native

Question

Добавление обработчика событий в createBottomTabNavigator из React Native

1

У меня есть приложение React Native, основная навигация которого осуществляется с помощью

createBottomTabNavigator

следующее:

import React from 'react';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'

import HomeStack from './HomeStack'
import SettingsStack from './SettingsStack'

const TabNavigator = createBottomTabNavigator({
    Home: {
        screen: HomeStack,
        navigationOptions: {
            tabBarIcon:({tintColor})=>(
              <Icon name="ios-home" color={tintColor} size={24}/>
            )
        }
      },
    Settings: {
        screen: SettingsStack,
        navigationOptions: {
            tabBarIcon:({tintColor})=>(
              <Icon name="ios-settings" color={tintColor} size={24}/>
            )
        }
      }
});

export default createAppContainer(TabNavigator)

Как видите, он в основном включает в себя два других компонента, которые сами являются стековыми навигаторами. Я не буду включать их, чтобы иметь более чистый вопрос. Я добавил в свое приложение push-уведомления в реальном времени, как описано здесь. Кажется, до сих пор все работало нормально, но я добавил обработчик уведомлений:

_handleNotification = (notification) => {
    this.setState({notification: notification});
  };

в моем HomeScreen, который является частью моего HomeStack (первый экран). Мне не очень нравится эта структура (с обработчиком на моем домашнем экране). У меня есть другой экран (в том же HomeStack), который я хотел бы обработать это новое прибывающее уведомление. Но я предполагаю, что этого не произойдет, пока этот другой экран не будет смонтирован. Итак, мне было интересно, возможно ли каким-то образом определить обработчик на уровне основного TabNavigator, а при обработке просто перенаправить на мой выделенный экран? Я предполагаю, что это немного чище.

user2128702 13 янв. 2019, в 00:09

Источник

Теги:

javascript

react-native

1 ответ

Ещё вопросы

dentemm · Answer 1 · 2019-01-13T09-37-00.000Z

Это легко реализовать, если вы просто создадите пользовательский компонент панели вкладок.

Конфигурация TabBar

import CustomTabBar from '???';

const TabRoutes = createBottomTabNavigator({
  Home: {screen: HomeStack},
  Settings: {screen: SettingsRoutes}
},{
  tabBarComponent: CustomTabBar,
});

export default createAppContainer(TabNavigator)

CustomTabBar

import CustomTabBarItem from '???';

class CustomTabBar extends React.Component {

  public constructor(props: Props) {
    super(props);

    this.state = {
      notification: undefined
    };
  }

  render() {

    const {navigation} = this.props;
    const routes = navigation.state.routes;

    return (
      <View>
        {routes.map(route => {
          // Just some basic example, create a CustomTabBarItem according your own needs
          <CustomTabBarItem
            key={route.key}
            onPress={() => navigation.navigate(route.routeName)}
            routeName={route.routeName}
          />
        })}
      </View>
    );
  }

  _handleNotification = (notification) => {
    this.setState({notification: notification});
  }; 
}