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 }) => {
    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})

Answer 2

尝试

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

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

动态将标头作为组件包含在StackNavigator RootScreen

2 个答案: