React Native中如何修改屏幕标题？基于react-native-tab-navigator场景

Hey there! Let's break down how to modify screen titles when using react-native-tab-navigator, depending on what exactly you're trying to adjust:

1. Changing the Bottom Tab Title #

If you just want to update the text shown on the bottom tab itself, it's super straightforward—just tweak the title prop on TabNavigator.Item:

<TabNavigator style={styles.container}>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="My Home" {/* Replace this with your desired tab title */}
    selectedTitleStyle={{color: "#3496f0"}}
    renderIcon={() => <Icon name="home" size={px2dp(22)} color="#666"/>}
    renderSelectedIcon={() => <Icon name="home" size={px2dp(22)} color="#3496f0"/>}
    onPress={() => this.setState({selectedTab: 'home'})}
  >
    {/* Your tab content goes here */}
  </TabNavigator.Item>
</TabNavigator>

2. Adding/Changing a Top Screen Title #

The react-native-tab-navigator library focuses only on bottom tab navigation—it doesn't include a built-in top header bar. To add a dynamic top title that updates when you switch tabs, you have two reliable approaches:

Option A: Add a Custom Header in Each Tab's Content Component #

Create a dedicated header section inside each of your tab page components:

// Example HomePage component
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const HomePage = () => {
  return (
    <View style={styles.pageContainer}>
      {/* Custom top header */}
      <View style={styles.header}>
        <Text style={styles.headerText}>Welcome to My Home</Text>
      </View>
      {/* Main page content */}
      <View style={styles.content}>
        <Text>This is your home screen content</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  pageContainer: { flex: 1 },
  header: {
    height: 56,
    backgroundColor: '#3496f0',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 10, // Account for status bar height if needed
  },
  headerText: {
    color: 'white',
    fontSize: 18,
    fontWeight: '600',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default HomePage;

Then use this component inside your tab item:

<TabNavigator.Item
  {/* ... other existing props */}
>
  <HomePage />
</TabNavigator.Item>

Option B: Add a Shared Header in the Parent Component #

If you want a single header that automatically updates when switching tabs, manage the title state in your parent component:

class MainNavigator extends React.Component {
  state = {
    selectedTab: 'home',
    // Map tab keys to their corresponding top titles
    tabTitles: {
      home: 'Home',
      profile: 'My Profile',
      settings: 'Settings'
    }
  };

  render() {
    const { selectedTab, tabTitles } = this.state;
    return (
      <View style={{ flex: 1 }}>
        {/* Shared top header */}
        <View style={styles.header}>
          <Text style={styles.headerText}>{tabTitles[selectedTab]}</Text>
        </View>
        {/* Tab Navigator */}
        <TabNavigator style={styles.tabContainer}>
          <TabNavigator.Item
            selected={selectedTab === 'home'}
            title="Home"
            selectedTitleStyle={{color: "#3496f0"}}
            renderIcon={() => <Icon name="home" size={px2dp(22)} color="#666"/>}
            renderSelectedIcon={() => <Icon name="home" size={px2dp(22)} color="#3496f0"/>}
            onPress={() => this.setState({selectedTab: 'home'})}
          >
            <View style={styles.tabContent}>
              <Text>Home Content</Text>
            </View>
          </TabNavigator.Item>
          {/* Repeat for other tabs */}
          <TabNavigator.Item
            selected={selectedTab === 'profile'}
            title="Profile"
            selectedTitleStyle={{color: "#3496f0"}}
            renderIcon={() => <Icon name="user" size={px2dp(22)} color="#666"/>}
            renderSelectedIcon={() => <Icon name="user" size={px2dp(22)} color="#3496f0"/>}
            onPress={() => this.setState({selectedTab: 'profile'})}
          >
            <View style={styles.tabContent}>
              <Text>Profile Content</Text>
            </View>
          </TabNavigator.Item>
        </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    height: 56,
    backgroundColor: '#3496f0',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 10,
  },
  headerText: {
    color: 'white',
    fontSize: 18,
    fontWeight: '600',
  },
  tabContainer: { flex: 1 },
  tabContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Now every time you switch tabs, the top header title will update to match the active tab automatically.

内容的提问来源于stack exchange，提问作者pj013