React Native：除条件渲染外，如何按用户订阅计划控制功能显隐

针对大规模React Native应用中基于订阅计划控制组件显隐的需求，这里有几个比零散条件渲染更易维护的方案：

把订阅权限判断逻辑封装成HOC，组件只需通过HOC包裹就能自动处理显隐，无需在组件内部重复写条件判断，适合批量复用权限规则。

示例代码：

import React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 高阶组件：接收允许的订阅计划列表，返回包装后的组件
const WithSubscriptionAccess = (allowedPlans) => (WrappedComponent) => {
  return (props) => {
    const [currentPlan, setCurrentPlan] = React.useState(null);

    React.useEffect(() => {
      // 从本地存储获取当前用户订阅计划（实际可替换为Redux/Context取数逻辑）
      AsyncStorage.getItem('userSubscription').then(plan => setCurrentPlan(plan));
    }, []);

    // 无权限时返回null或自定义占位组件
    if (!currentPlan || !allowedPlans.includes(currentPlan)) {
      return null;
    }

    return <WrappedComponent {...props} />;
  };
};

// 使用方式：给需要权限的组件套上HOC
const PremiumAnalytics = () => { /* 付费功能组件 */ };
export default WithSubscriptionAccess(['premium', 'enterprise'])(PremiumAnalytics);

用React Context全局维护用户订阅状态，再封装一个自定义钩子useSubscriptionPermission，组件中直接调用钩子判断权限，逻辑集中且复用性强，避免状态散落。

示例代码：

import React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 1. 创建订阅Context
const SubscriptionContext = React.createContext({
  currentPlan: null,
  updateSubscription: () => {},
});

// 2. 提供Context的Provider组件
export const SubscriptionProvider = ({ children }) => {
  const [currentPlan, setCurrentPlan] = React.useState(null);

  // 初始化时加载本地订阅状态
  React.useEffect(() => {
    AsyncStorage.getItem('userSubscription').then(plan => setCurrentPlan(plan));
  }, []);

  // 收到Stripe webhook后，调用此方法更新本地状态
  const updateSubscription = (newPlan) => {
    setCurrentPlan(newPlan);
    AsyncStorage.setItem('userSubscription', newPlan);
  };

  return (
    <SubscriptionContext.Provider value={{ currentPlan, updateSubscription }}>
      {children}
    </SubscriptionContext.Provider>
  );
};

// 3. 自定义权限钩子
export const useSubscriptionPermission = (allowedPlans) => {
  const { currentPlan } = React.useContext(SubscriptionContext);
  return currentPlan && allowedPlans.includes(currentPlan);
};

// 组件中使用
const AdvancedSettings = () => {
  const hasAccess = useSubscriptionPermission(['premium']);
  
  if (!hasAccess) return null;
  
  return (/* 高级设置内容 */);
};

如果是整页面的付费功能，直接在路由层面做拦截，避免用户无权限访问页面，适合React Navigation场景。

示例代码（React Navigation v6）：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Alert } from 'react-native';
import { useContext } from 'react';
import { SubscriptionContext } from './SubscriptionContext';

const Stack = createStackNavigator();

const AppNavigator = () => {
  const { currentPlan } = useContext(SubscriptionContext);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* 公共页面 */}
        <Stack.Screen name="Home" component={HomeScreen} />
        {/* 付费页面：通过beforeRemove拦截无权限跳转 */}
        <Stack.Screen 
          name="PremiumDashboard" 
          component={PremiumDashboardScreen}
          options={{
            beforeRemove: (e) => {
              if (!currentPlan || !['premium', 'enterprise'].includes(currentPlan)) {
                e.preventDefault();
                Alert.alert('提示', '需要升级到高级订阅才能访问此页面');
              }
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

把所有需要权限控制的组件和对应的允许计划维护在一个配置对象中，通过统一的渲染函数加载组件，方便批量管理和修改权限规则。

示例代码：

import React, { useContext } from 'react';
import { SubscriptionContext } from './SubscriptionContext';

// 权限配置表：集中管理组件与允许计划的映射
const subscriptionComponents = {
  premiumAnalytics: {
    allowedPlans: ['premium', 'enterprise'],
    component: () => require('./PremiumAnalytics').default,
  },
  adFreeBanner: {
    allowedPlans: ['all'], // 特殊标识：所有计划都能访问
    component: () => require('./AdFreeBanner').default,
  },
};

// 统一渲染函数
const renderSubscriptionComponent = (componentKey) => {
  const config = subscriptionComponents[componentKey];
  if (!config) return null;

  const { currentPlan } = useContext(SubscriptionContext);
  const hasAccess = config.allowedPlans.includes('all') || config.allowedPlans.includes(currentPlan);
  
  if (!hasAccess) return null;

  const Component = config.component();
  return <Component />;
};

// 使用方式
const HomeScreen = () => {
  return (
    <View>
      {/* 公共内容 */}
      {renderSubscriptionComponent('premiumAnalytics')}
      {renderSubscriptionComponent('adFreeBanner')}
    </View>
  );
};

• 状态同步一致性：Stripe webhook回调到服务端后，要及时通知客户端更新订阅状态（比如推送通知、Socket连接，或客户端启动时拉取最新状态），避免本地与服务端状态不一致。
• 缓存订阅状态：把用户订阅计划存在AsyncStorage或MMKV中，减少不必要的服务端请求，提升响应速度。
• 降级处理：当订阅状态获取失败时，默认显示基础功能，等状态加载完成后再更新页面。

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