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

Question

下面是我的MainTopTab的代码，在我的App的另一个导航=>“ createStackNavigator”上调用了MainTabScreen。因为这是我的第二个主要标签。我无法设置图标，也无法更改名称。因为它不是类组件，所以我无法使用下面的代码

 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;

Answer 1

这里是一个响应本机的示例：

import React, { Component } from 'react';  
import { StyleSheet, View, Text, Image } from 'react-native';  
import { StackNavigator } from 'react-navigation';

class ActionBarImage extends Component {

  render() {
    return (
      <View style={{flexDirection: 'row'}}>
        <Image
          source={{uri : 'image url'}}
          style={{ width: 40, height: 40, borderRadius: 40/2, marginLeft: 15}}
        />
      </View>        
    );    
  }
}

class MainActivity extends Component {   
static navigationOptions =
   {
      title: 'MainActivity',

      headerLeft : <ActionBarImage />,
      headerStyle: {
      backgroundColor: '#FF9800'
    },
    headerTintColor: '#fff',   
   };

   render()
   {
      return(
         <View style = { styles.MainContainer }>
            <Text style={{fontSize: 23}}> Thanks Stackoverflow </Text> 
         </View>
      );
   }
}

export default ActivityProject = StackNavigator(
{
  First: { screen: MainActivity }
});

const styles = StyleSheet.create({
  MainContainer :
  {
      flex:1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 10,
      backgroundColor: '#fff'
  }
});

Answer 2

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

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