更改`react-native-material-bottom-navigation`和`react-native-router-flux`中的选项卡内容

Question

我想改变react-native-material-bottom-navigation中标签的内容，但是当我按Tab键时，它会将我重定向到相应的页面。我想在header和tabs之间更改内容。我试过下面的代码，但我不知道如何在条件语句中显示内容。

HomeScreen.js

import React, {Component} from 'react';
import {Text, View } from 'react-native';
import  BottomNavigation, { Tab } from 'react-native-material-bottom-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';

import HomeScreenContent from './HomeScreenContent';
import Categories from './Categories';
import Profile from './Profile';

export default class HomeScreen extends Component {
    constructor(props) {
        super(props);
        this.handleTabChange = this.handleTabChange.bind(this);
        this.state = { activeTab: 0 };
    }

    handleTabChange(newTabIndex, oldTabIndex) {
        this.setState({ activeTab: newTabIndex });
        if (newTabIndex === oldTabIndex) {
          null;
        }
        if (this.state.activeTab === 0) {
          <HomeScreenContent />
        } else if (this.state.activeTab === 1) {
          <Categories/>
        } else {
          <Profile />
        }
    }
    render() {
        return (
            <View style={styles.container}>   
                <BottomNavigation
                    activeTab={this.state.activeTab}
                    labelColor="#5c007a"
                    rippleColor="white"
                    style={{
                      height: 56,
                      elevation: 8,
                      position: 'absolute',
                      left: 0,
                      bottom: 0,
                      right: 0
                    }}
                    onTabChange={this.handleTabChange}
                >
                    <Tab 
                      barBackgroundColor="#fff"
                      label="Home"
                      icon={<Icon size={24} color="#5c007a" name="home" />}
                    />
                    <Tab 
                      barBackgroundColor="#fff"
                      label="Categories"
                      icon={<Icon size={24} color="#5c007a" name="list" />}
                    />
                    <Tab
                      barBackgroundColor="#fff"
                      label="Profile"
                      icon={<Icon size={24} color="#5c007a" name="person" />}
                    />
                </BottomNavigation>
            </View>
        );
    }
}

HomeScreenContent.js

import React from 'react';
import { TouchableOpacity, ScrollView, Image, Dimensions , StyleSheet, Text, View } from 'react-native';

export default class HomeScreenContent extends React.Component {
  render() {
    return (
      <View>
         <Text> Hello from HomeScreen</Text>
      </View>
    );
  }
}

Categories.js

import React from 'react';
import { Text, View } from 'react-native';

export default class HomeScreenContent extends React.Component {
  render() {
    return (
      <View>
         <Text> Hello from Categories</Text>
      </View>
    );
  }
}

Profile.js

import React from 'react';
import {Text, View } from 'react-native';

export default class HomeScreenContent extends React.Component {
  render() {
    return (
      <View>
         <Text> Hello from Profile</Text>
      </View>
    );
  }
}