时间戳

首页 > 解决方案 > 如何将道具发送到自定义 TabBar？

react-native - 如何将道具发送到自定义 TabBar？

问题描述

我刚刚创建了一个自定义的 BottomTabBar，并且我有一些共享组件，我想在组件处于活动状态时隐藏标签栏。

我的问题是如何将组件状态发送到标签栏？

这是我的导航器

export default (LoggedInTabNavigator = createBottomTabNavigator(
  {
    Explore: {
      screen: Explore,
      navigationOptions: {
        tabBarIcon: CustomTabBarIcon("layers", 32)
      }
    },
    SavedTab: {
      screen: SavedTab,
      navigationOptions: {
        tabBarIcon: CustomTabBarIcon("heart", 32)
      }
    },
    AddPost: {
      screen: AddPost,
      navigationOptions: {
        tabBarIcon: CustomTabBarIcon("plus", 32)
      }
    },
    Chat: {
      screen: Chat,
      navigationOptions: {
        tabBarIcon: CustomTabBarIcon("email", 32)
      }
    },
    More: {
      screen: More,
      navigationOptions: {
        tabBarIcon: CustomTabBarIcon("dots-horizontal", 32)
      }
    }
  },
  {
    tabBarComponent: props => <BottomTabBar {...props} />
  },
  {
    tabBarOptions: {
      labelStyle: {
        marginBottom: 5
      },
      activeTintColor: colors.white,
      showLabel: false,
      style: {
        backgroundColor: colors.dark
      }
    },
    tabBarPosition: "bottom"
  }
));

现在我想将组件状态发送isVisible到tabBarComponent类似

onPress={() =>
   this.setState({
      isVisible: true
   })
}

我知道我可以将道具发送到屏幕上，this.props.navigation.navigate('Screen', {isVisible})但这只有在我转到另一个页面时才有效

标签： react-nativereact-navigation

解决方案

使用 ScreenProps 怎么样？

import LoggedInTabNavigator from './LoggedInTabNavigator';

<LoggedInTabNavigator screenProps={{ isVisible: this.state.isVisible}} />

然后你可以从

this.props.screenProps.isVisible

推荐阅读