在 StackNavigator RootScreen 中动态包含标题作为组件

Question

我想在我的导航标签上方有一个自定义标题。我有一个包含在 RootScreen 中的标题组件，但据我所知，我无法动态显示/隐藏它。

const tabBarLabelAndNotifications = (notifications, stack) => {
  return (
    <View style={{display: 'flex', flexDirection: 'row'}}>
      <Text style={{color: '#3F92DF', fontSize: 10, fontWeight: 'bold'}}>{stack}</Text>
      <View style={styles.circle}>
        <Text style={[styles.notifications, styles.fontLatoBold]}>{notifications}</Text>
      </View>
    </View>
  )
}

const EngagementStack = createStackNavigator({
  Engagements: EngagementsScreen,
});

EngagementStack.navigationOptions = {
  tabBarLabel: 'ENGAGEMENTS',
};

const QueryStack = createStackNavigator({
  Queries: QueriesScreen,
});

QueryStack.navigationOptions = {
  tabBarLabel: tabBarLabelAndNotifications(4, 'QUERY')
};

const IssuesStack = createStackNavigator({
  Issues: IssuesScreen,
});

IssuesStack.navigationOptions = {
  tabBarLabel: tabBarLabelAndNotifications(2, 'ISSUES')
};

const TabNavigator = createMaterialTopTabNavigator({
  EngagementStack,
  QueryStack,
  IssuesStack
},
  {
    tabBarOptions: {
      style: {
        backgroundColor: 'transparent'
      },
      labelStyle: {
        color: '#3F92DF',
        fontWeight: 'bold',
        fontSize: 10
      },
      indicatorStyle: {
        height: '100%',
        backgroundColor: 'rgba(82, 170, 231, 0.2)',
        borderRadius: 4
      }
    }
  }
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: TabNavigator
    },
    EngagementDetailModal: {
      screen: EngagementDetailModal
    },
    RequestForRecordsModal: {
      screen: RequestForRecordsModal
    }
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
)

const RootNav = createAppContainer(RootStack);

export default function RootScreen() {
  return (
    <View style={{ flex: 1 }}>
      <Header />
      <RootNav />
    </View>
  );
}

从上面的代码中，我想动态显示<Header /> 组件，只要我在页面上而不是模式上。

我尝试在与我发布的代码相同的文件中使用 withNavigation，但检查导航道具只是让我未定义。代码似乎永远不会从根重新渲染。我尝试为每个单独的页面添加 navigationOptions，但它没有呈现我的自定义标题。

编辑 1：根据 documentation。以下代码仅在我的视图中显示选项卡上方的空白区域

static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <Header />,
  };

而导入的组件只是为了测试

export default function Header() {
    return (
        <View><Text>hi</Text></View>
    )
}

Answer 1

试试

static navigationOptions = ({ navigation, tintColor }) => {

    return {
      headerTitle: (
        <Header />
      ),
      headerLeft: (
        <View />
      ),
      headerRight: (
       <View />
      )
    };
  };

Answer 2

在您要隐藏/显示模态静态导航选项的屏幕内：

   static navigationOptions = ({ navigation }) => {
    const { state } = navigation;
    let header = <CustomHeader />;
    if (state.params) header = state.params.modalShowing ? null : <CustomHeader />
    return { header }
}

然后，当您想显示模态时，请执行 setParams：

this.props.navigation.setParams({modalShowing:!this.state.showModal})