在组件间使用useRef实现Tab按钮文本动态更新

首先你用useRef的方式行不通，因为ref的变化不会触发组件重渲染，标签文本没法自动更新。得用useState来维护计数状态，下面给两种实用的实现方式：

方式一：子组件调用navigation.setOptions直接更新标签 #

这种方式不需要父组件传递状态，子组件可以直接修改对应Tab的选项配置：

import React from 'react';
import { View, Button } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// 子组件FriendsList
function FriendsList({ navigation }) {
  // 示例：在操作（比如请求完成）后更新Find friends的标签
  const updateFriendRequestCount = () => {
    // 获取父级Tab导航器实例，修改指定Tab的标签
    navigation.getParent()?.setOptions({
      screens: {
        FriendsFind: {
          options: {
            tabBarLabel: 'Find friends (5)'
          }
        }
      }
    });
  };

  return (
    <View>
      <Button title="模拟收到新请求" onPress={updateFriendRequestCount} />
    </View>
  );
}

// 子组件FriendsFind
function FriendsFind({ navigation }) {
  // 示例：更新自己的标签
  const updateOwnLabel = () => {
    navigation.setOptions({
      tabBarLabel: 'Find friends (3)'
    });
  };

  return (
    <View>
      <Button title="更新当前标签计数" onPress={updateOwnLabel} />
    </View>
  );
}

// 父组件FriendsHomeScreen
function FriendsHomeScreen({ navigation }){
    const Tab = createBottomTabNavigator();
    
    return (
      <View style={{flex:1}}>   
        <Tab.Navigator
          initialRouteName="FriendsList"
          screenOptions={{
              tabBarIconStyle: { display: 'none' },
              headerShown: false,
              backgroundColor:'#000',
              tabBarStyle: {
                // 你的自定义样式
              },
          }}> 
          <Tab.Screen
              name="FriendsList"
              component={FriendsList}
              options={{ tabBarLabel: 'Friends' }}
          />
          <Tab.Screen
              name="FriendsFind"
              component={FriendsFind}
              options={{ tabBarLabel: 'Find friends (0)' }}
          />
        </Tab.Navigator>
      </View>
    );
}

方式二：父组件传递状态更新函数给子组件 #

这种方式通过状态提升，让子组件调用父组件的状态更新函数，触发父组件重渲染从而更新标签：

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// 子组件FriendsList，接收父组件传来的更新函数
function FriendsList({ navigation, updateRequestCount }) {
  const addNewRequest = () => {
    // 调用父组件的函数更新计数
    updateRequestCount(prev => prev + 1);
  };

  return (
    <View>
      <Button title="新增好友请求" onPress={addNewRequest} />
    </View>
  );
}

// 子组件FriendsFind，同样可以接收更新函数
function FriendsFind({ navigation, updateRequestCount }) {
  const clearRequests = () => {
    updateRequestCount(0);
  };

  return (
    <View>
      <Button title="清空请求计数" onPress={clearRequests} />
    </View>
  );
}

// 父组件FriendsHomeScreen
function FriendsHomeScreen({ navigation }){
    const Tab = createBottomTabNavigator();
    // 用useState维护请求计数，状态变化自动触发重渲染
    const [friendRequestsCount, setFriendRequestsCount] = useState(0);
    
    return (
      <View style={{flex:1}}>   
        <Tab.Navigator
          initialRouteName="FriendsList"
          screenOptions={{
              tabBarIconStyle: { display: 'none' },
              headerShown: false,
              backgroundColor:'#000',
              tabBarStyle: {
                // 你的自定义样式
              },
          }}> 
          <Tab.Screen
              name="FriendsList"
              // 通过initialParams传递更新函数给子组件
              initialParams={{ updateRequestCount: setFriendRequestsCount }}
              component={FriendsList}
              options={{ tabBarLabel: 'Friends' }}
          />
          <Tab.Screen
              name="FriendsFind"
              initialParams={{ updateRequestCount: setFriendRequestsCount }}
              component={FriendsFind}
              options={{
                  tabBarLabel: `Find friends (${friendRequestsCount})`,
              }}
          />
        </Tab.Navigator>
      </View>
    );
}

两种方式的区别 #

• 方式一更灵活，适合子组件独立控制标签内容的场景；
• 方式二更符合React的状态管理逻辑，适合需要统一维护计数状态的场景。

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