反应本机选项卡导航屏幕标题未显示 [英] React native tab navigation screen title not showing

问题描述

我使用 createStackNavigator 和 createBottomTabNavigator 创建了 2 个选项卡，下面是屏幕截图

I have created 2 tabs with use of createStackNavigator and createBottomTabNavigator, below is a screenshot

我的 App.js 代码如下

My App.js code is below

import React from 'react';
import { StatusBar, View, Text } from 'react-native';
import MainNavigator from './src/navigation';

export default class App extends React.Component {
  render() {
    return (
        <View style={{ flex:1 }}>
            <StatusBar backgroundColor="#000000" barStyle="light-content"/>
            <MainNavigator/>
        </View>
    );
  }
}

和App.js中包含的src/navigation/index.js如下

and src/navigation/index.js which included in App.js is as below

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  StatusBar,
  Text,
  View
} from 'react-native';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import Colors from '../constants/Colors';

import Splash from '../components/Splash/Splash';
import Login from '../components/Login/Login';
import Home from '../components/Home/Home';
import Profile from '../components/Profile/Profile';

const MainNavigator = createStackNavigator({
    // Splash: {screen: Splash, navigationOptions:{ header: null, title: 'Splash'}},
    // Login: {screen: Login, navigationOptions:{ header: null, title: 'Login'}},
    // Home: {screen: Home, navigationOptions:{ title: 'Home'}}
    Root: {
        screen: createBottomTabNavigator({
            home: {
              screen: Home,
              navigationOptions: {
                title: 'Home',
                headerTitle: 'Home',
                tabBarLabel: 'Home',
                tabBarIcon: ({ tintColor, focused }) => (
                  <Icon
                  name={'home'}
                  size={24}
                  color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
                  />
                ),
              }
            },
            profile: {
              screen: Profile,
              navigationOptions: {
                tabBarLabel: 'Profile',
                tabBarIcon: ({ tintColor, focused }) => (
                  <Icon
                  name={'account-circle'}
                  size={24}
                  color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
                  />
                ),
              }
            }
        },
        {
          tabBarOptions: {
            activeTintColor: Colors.tintColor,
            showLabel: true,
            showIcon: true,
            indicatorStyle: {
              backgroundColor: 'transparent'
            },
            iconStyle: {
              width: 24,
              height: 24
            },
            style: {
              backgroundColor: '#eeeeee',
            },
            tabBarIcon: ({ tintColor }) => {Colors.darkTintColor},
          },
          lazy: true,
          tabBarPosition: 'bottom',
        }),
    }
});

export default MainNavigator;

我想显示标题，我尝试了不同的方法但没有奏效.请帮我解决这个问题.

I want to show title, and I tried with different methods but not worked. Please help me to resolve this issue.

推荐答案

为 createBottomTabNavigator 设置 navigationOptions.这是完整的代码:

Set navigationOptions for createBottomTabNavigator. Here is full code :

const TabNav = createBottomTabNavigator(
  {
    home: {
      screen: Home,
      navigationOptions: {
        title: 'Home',
        headerTitle: 'Home',
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={'home'}
            size={24}
            color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
          />
        ),
      }
    },
    profile: {
      screen: Profile,
      navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={'account-circle'}
            size={24}
            color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
          />
        ),
      }
    }
  },
  {
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
  }
);

TabNav.navigationOptions = ({ navigation }) => {
  let { routeName } = navigation.state.routes[navigation.state.index];
  let title;
  if (routeName === 'home') {
    title = 'Home';
  } else if (routeName === 'profile') {
    title = 'Profile';
  }
  return {
    title,
  };
};

const MainNavigator = createStackNavigator({
  // Splash: {screen: Splash, navigationOptions:{ header: null, title: 'Splash'}},
  // Login: {screen: Login, navigationOptions:{ header: null, title: 'Login'}},
  // Home: {screen: Home, navigationOptions:{ title: 'Home'}}
  Root: {
    screen: TabNav
  }
});

export default MainNavigator;

这篇关于反应本机选项卡导航屏幕标题未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！