Question

我有一个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)

如您所见，它基本上包括其他两个组件，它们本身就是堆栈导航器。为了更清楚的问题，我将不包括它们。我添加到我的应用程序中的是here中所述的实时推送通知。到目前为止，一切似乎都工作正常，但是我添加了通知处理程序：

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

在我的 HomeScreen 中，这是我的 HomeStack 的一部分（第一个屏幕）。我不太喜欢这种结构（在HomeScreen中具有处理程序）。我有另一个屏幕（在同一HomeStack中），我想处理这个新的通知。但我认为只有在未安装此其他屏幕之前，它才会发生。因此，我想知道，是否有可能在主 TabNavigator 级别上定义处理程序，以及何时仅将其重定向到我的专用屏幕？我认为这是一种更干净的方法。

Answer 1

如果您仅创建自定义标签栏组件，则易于实现。

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

在React Native的createBottomTabNavigator上添加事件处理程序

1 个答案: