Question

我刚刚创建了一个自定义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})一样将道具发送到屏幕，但这仅在我转到另一页时有效

Answer 1

使用ScreenProps有什么用呢

import LoggedInTabNavigator from './LoggedInTabNavigator';

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

然后您可以从

访问此文件

this.props.screenProps.isVisible

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

1 个答案: