如何在 React Native 组件中验证 Spotify？

Question

我正在为学校项目创建一个 React Native 移动应用程序，我希望用户能够登录到 Spotify，以便能够使用 Spotify API.

我正在为 iOS 开发并使用 Expo，因此发现 this documentation from Expo 非常有帮助。使用他们的示例授权码，我成功地制作了一个非常简单的 React 应用程序，允许用户按下一个按钮，提示他们使用 Spotify 登录。不过，对于我的项目，我有不同的组件对应于我的应用程序中的不同屏幕。每当我尝试将代码移动到组件中时，我都会收到一个错误，我不确定如何解决（我对 React 还是很陌生，Javascript）。

代码如下：

import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import { makeRedirectUri, useAuthRequest } from 'expo-auth-session';
import { View, Button, StyleSheet } from 'react-native';
import { LoginContext } from '../LoginContext';

WebBrowser.maybeCompleteAuthSession();

// Endpoint
const discovery = {
  authorizationEndpoint: 'https://accounts.spotify.com/authorize',
  tokenEndpoint: 'https://accounts.spotify.com/api/token',
};

const [request, response, promptAsync] = useAuthRequest(
    {
    clientId: CLIENT_ID,
    scopes: ['user-read-email', 'playlist-modify-public'],
    // In order to follow the "Authorization Code Flow" to fetch token after authorizationEndpoint
    // this must be set to false
    usePKCE: false,
    redirectUri: 'exp://localhost:19000/--/',
    },
    discovery
);

React.useEffect(() => {
    if (response?.type === 'success') {
    const { code } = response.params;
    }
}, [response]);


export default class Settings extends React.Component {

    render () {

        return (
            <View style={{flex: 1, display: 'flex', justifyContent: 'center', alignItems: "center", alignContent: 'center'}}>  
            <Button
            //disabled={!request}
            title="Login to Spotify"
            onPress={() => {
                //console.log("Login attempt");
                promptAsync();
                }}
            />
            </View>
        );
    }
}

我收到一条错误消息，指出：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.

我查看了错误消息中的 link 以查看是否可以自我调试，但我遇到了一些麻烦，因为我对 React 还是很陌生。任何帮助将不胜感激！

Answer 1

useAuthRequest 和 useEffect 就是我们所说的 React hooks。它们只能用于功能组件。在我看来，您应该首先查看有关如何在 React 中使用钩子的文档：https://reactjs.org/docs/hooks-intro.html


WebBrowser.maybeCompleteAuthSession();

// Endpoint
const discovery = {
  authorizationEndpoint: 'https://accounts.spotify.com/authorize',
  tokenEndpoint: 'https://accounts.spotify.com/api/token',
};

// This is the functional component
const Settings = () => {
    const [request, response, promptAsync] = useAuthRequest({
      clientId: CLIENT_ID,
      scopes: ['user-read-email', 'playlist-modify-public'],
      // In order to follow the "Authorization Code Flow" to fetch token after authorizationEndpoint
      // this must be set to false
      usePKCE: false,
      redirectUri: 'exp://localhost:19000/--/',
    }, discovery);

    React.useEffect(() => {
      if (response?.type === 'success') {
      const { code } = response.params;
      }
    }, [response]);
   
    return (
        <View>...</View>
    )
}

如何在 React Native 组件中验证 Spotify？

How can I authenticate Spotify in a React Native component?

authentication

oauth

react-native

expo

react-hooks