代码之家 › 专栏 › 技术社区 › user2128702

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

react-native javascript

user2128702 · 技术社区 · 5 年前

我有一个反应本机应用程序的主要导航是完成使用

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

主屏幕 这是我生活的一部分 本垒打 选项卡导航器 什么时候处理只是为了重定向到我的专用屏幕?我想这是一个更干净的方法。

1 回复 | 直到 5 年前

dentemm 5 年前

如果您只是创建一个自定义选项卡栏组件,那么这很容易实现。

选项卡配置

import CustomTabBar from '???';

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

export default createAppContainer(TabNavigator)

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前