reactjs - 如何在我的 MainTabHome 上添加标题名称和图标

Question

下面是我的 MainTopTab 的代码，并且 MainTabScreen 在我的应用程序上的另一个 Navigation =>“createStackNavigator”上被调用。因为它是我的第二个主要选项卡。我也无法设置图标和更改名称。因为它不是类组件，所以我无法使用下面的代码

 static navigationOptions = {
    title: 'Home' }

无论如何在不使用类组件的情况下设置标题和图标。?

import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
//components
import All from './All';
import MostView from './MostView';
import Reco from './Reco';
import Recent from './Recent';

const MainTabScreen = createMaterialTopTabNavigator(
    {
        All: { screen: All },
        MostView: { screen: MostView },
        Reco: { screen: Reco },
        Recent: { screen: Recent },
    },
    {
        initialRouteName: 'All',
        tabBarPosition: 'top',
        swipeEnabled: true,
        animationEnabled: true,
        tabBarOptions: {
            activeTintColor: '#744DD2',
            inactiveTintColor: '#4f4955',
            style: {
                backgroundColor: '#fff',
                //height: 150
            },
            labelStyle: {
                textAlign: 'center',
            },
            indicatorStyle: {
                borderBottomColor: '#744DD2',
                borderBottomWidth: 2.6,
            },
        },
    },
);

const TopTab = createStackNavigator({
    MainTabScreen: {
        screen: MainTabScreen,
        navigationOptions: {
            headerStyle: {
                backgroundColor: '#744DD2',
            },
            headerTintColor: '#FFFFFF',
            title: 'Clubs',
        },
    },
});



const MainTopTab = createAppContainer(MainTabScreen);

export default MainTopTab;

标签： reactjsreact-nativereact-navigation

Answer 1

取决于您使用的是哪个版本react-navigation，如果您使用的是最新版本 5.x ，您可以执行以下操作：

const TopTab = createStackNavigator({
    MainTabScreen: {
        component: MainTabScreen,
        options={{
          headerTitle: <Text>Home</Text>,
          headerRight: () => (
            <Image source={{ uri: ''}} />
          ),
        }},
    },
});