Как добавить имя заголовка и значок на мой 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;

Answer 1

Зависит от того, какую версию react-navigation вы используете, если вы используете последнюю версию 5.x, вы можете сделать следующее:

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

Answer 2

Вот пример для реакции нативного:

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'
  }
});