如何在React Native应用中添加订阅用户专属页面访问功能？

Hey there! Since you're new to React Native, let's break this down into simple, actionable steps to build your subscription-locked Content page feature. I'll focus on beginner-friendly tools and clear code examples.

Step 1: Track Subscription State with Context API #

First, you need a way to share the user's subscription status (paid/unpaid) across all pages. For beginners, React Context API is perfect—no need for complex state managers like Redux yet.

Create a new file SubscriptionContext.js:

import React, { createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const SubscriptionContext = createContext();

export const SubscriptionProvider = ({ children }) => {
  const [isSubscribed, setIsSubscribed] = useState(false);

  // Load saved subscription status when the app starts
  useEffect(() => {
    const loadSubscriptionStatus = async () => {
      const status = await AsyncStorage.getItem('isSubscribed');
      if (status === 'true') {
        setIsSubscribed(true);
      }
    };
    loadSubscriptionStatus();
  }, []);

  // Save status to storage when it changes
  const updateSubscriptionStatus = async (status) => {
    setIsSubscribed(status);
    await AsyncStorage.setItem('isSubscribed', status.toString());
  };

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

Wrap your root component (usually in App.js) with this provider so all pages can access the state.

Step 2: Create a Protected Route for Content Page #

Use React Navigation (the most common navigation library for React Native) to create a "guard" that blocks access to the Content page if the user isn't subscribed.

First, make sure you have React Navigation set up (install @react-navigation/native and the stack navigator). Then create a ProtectedRoute.js component:

import React, { useContext } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { SubscriptionContext } from './SubscriptionContext';
import Content from './Content';
import Payment from './Payment';

const Stack = createStackNavigator();

export const ProtectedRoute = () => {
  const { isSubscribed } = useContext(SubscriptionContext);

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {isSubscribed ? (
        <Stack.Screen name="Content" component={Content} />
      ) : (
        <Stack.Screen name="Payment" component={Payment} />
      )}
    </Stack.Navigator>
  );
};

Alternatively, if you're using a stack navigator already, you can add the check directly in the navigation options or use a custom hook to redirect.

Step 3: Set Up Home Page Navigation #

In your Home page, add a button that navigates to either the Payment page (if not subscribed) or directly to Content (if already subscribed):

import React, { useContext } from 'react';
import { View, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { SubscriptionContext } from './SubscriptionContext';

const Home = () => {
  const navigation = useNavigation();
  const { isSubscribed } = useContext(SubscriptionContext);

  const handleNavigate = () => {
    if (isSubscribed) {
      navigation.navigate('Content');
    } else {
      navigation.navigate('Payment');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Access Premium Content" onPress={handleNavigate} />
    </View>
  );
};

export default Home;

Step 4: Handle Payment Success in Payment Page #

In the Payment page, after the user completes payment (you'll need to integrate a payment SDK like Stripe, PayPal, or local payment providers), update the subscription status and navigate to Content.

Here's a simplified example (replace the mock payment with real SDK code):

import React, { useContext } from 'react';
import { View, Button, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { SubscriptionContext } from './SubscriptionContext';

const Payment = () => {
  const navigation = useNavigation();
  const { updateSubscriptionStatus } = useContext(SubscriptionContext);

  const handlePaymentSuccess = async () => {
    // Replace this with actual payment processing logic
    await updateSubscriptionStatus(true);
    navigation.navigate('Content');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Complete your payment to access premium content!</Text>
      <Button title="Pay Now" onPress={handlePaymentSuccess} />
    </View>
  );
};

export default Payment;

Key Additional Tips for Production #

• Backend Validation: Never trust only frontend state! In production, your app should fetch the user's subscription status from your backend API on app launch, instead of relying solely on local storage. This prevents users from tampering with local data to access paid content.
• Payment SDK Integration: For real payments, follow the official docs of your chosen provider to handle payment flows securely.
• Error Handling: Add loading states, error messages for failed payments, and fallback logic if AsyncStorage fails.

Paid Assistance #

If you're struggling with integrating payment SDKs, setting up backend validation, or need help debugging the flow, feel free to reach out with details about your project (like which payment provider you're using, if you have a backend already, etc.)—I can offer one-on-one guidance or code implementation support.

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