React Native中React Hooks钩子调用无效问题求助

Let's break down why you're hitting this error and how to fix it quickly.

The Root Cause #

Your foregroundService function is a regular JavaScript function, but you're using useEffect inside it. React Hooks have strict rules:

Hooks can only be called at the top level of a function component or inside a custom Hook (functions starting with use).

Since your function doesn't meet either criteria, React throws that "invalid hook call" error.

Solution 1: Turn it into a Custom Hook #

Custom Hooks let you reuse stateful logic across components, and they must start with use to follow React's conventions. Here's how to adjust your code:

// Custom Hook (name starts with "use")
function useForegroundService() {
  useEffect(() => {
    async function startService() {
      if (Platform.OS !== 'android') {
        console.log('Only Android platform is supported');
        return;
      }
      if (Platform.Version >= 26) {
        const channelConfig = {
          id: 'ForegroundServiceChannel',
          name: 'Notification Channel',
          description: 'Notification Channel for Foreground Service',
          enableVibration: false,
          importance: 2
        };
        await VIForegroundService.createNotificationChannel(channelConfig);
      }
      const notificationConfig = {
        id: 3456,
        title: 'Foreground Service',
        text: 'Foreground service is running',
        icon: 'ic_notification',
        priority: 0
      };
      if (Platform.Version >= 26) {
        notificationConfig.channelId = 'ForegroundServiceChannel';
      }
      await VIForegroundService.startService(notificationConfig);
    };
    startService();
  }, [])
};

// Use the hook in your function component
function App() {
  useForegroundService();

  return (
    <View>
      {/* Your app content here */}
    </View>
  );
}

Solution 2: Embed the Logic Directly in a Component #

If you don't need to reuse this logic elsewhere, you can put the useEffect directly in your function component's top level:

function App() {
  useEffect(() => {
    async function startService() {
      if (Platform.OS !== 'android') {
        console.log('Only Android platform is supported');
        return;
      }
      if (Platform.Version >= 26) {
        const channelConfig = {
          id: 'ForegroundServiceChannel',
          name: 'Notification Channel',
          description: 'Notification Channel for Foreground Service',
          enableVibration: false,
          importance: 2
        };
        await VIForegroundService.createNotificationChannel(channelConfig);
      }
      const notificationConfig = {
        id: 3456,
        title: 'Foreground Service',
        text: 'Foreground service is running',
        icon: 'ic_notification',
        priority: 0
      };
      if (Platform.Version >= 26) {
        notificationConfig.channelId = 'ForegroundServiceChannel';
      }
      await VIForegroundService.startService(notificationConfig);
    };
    startService();
  }, [])

  return (
    <View>
      {/* Your app content here */}
    </View>
  );
}

Additional Checks (If the Error Persists) #

If you still see the error after fixing the hook placement, verify these common issues:

• Version Mismatch: Ensure you're using React 16.8.0 or higher (the first version that supports Hooks) and a compatible React Native version. Check your package.json to confirm.
• Multiple React Copies: Run npm ls react (or yarn list react) in your project root. If you see multiple versions listed, clean your dependencies (rm -rf node_modules && npm install) or adjust your package.json to lock React to a single version.

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