探索React Native的Facebook SDK登录按钮组件：react-native-fbsdk

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';
 
export default class FacebookLoginButton extends React.Component {
  // 构造函数中初始化状态
  constructor(props) {
    super(props);
    this.state = { isLoggedIn: false };
  }
 
  // 当组件挂载后，检查用户的登录状态
  componentDidMount() {
    AccessToken.getCurrentAccessToken().then(
      (data) => {
        if (data) {
          this.setState({ isLoggedIn: true });
        }
      }
    );
  }
 
  // 登录按钮点击事件处理
  handleLogin = () => {
    if (this.state.isLoggedIn) {
      // 用户已登录，执行登出操作
      AccessToken.getCurrentAccessToken().then(data => {
        const { accessToken } = data;
        if (accessToken) {
          AccessToken.deleteCurrentAccessToken().then(
            () => this.setState({ isLoggedIn: false })
          );
        }
      });
    } else {
      // 用户未登录，执行登录操作
      this.setState({ isLoggedIn: true });
    }
  };
 
  // 渲染登录按钮
  render() {
    return (
      <View style={styles.container}>
        <LoginButton
          readPermissions={['public_profile', 'email']}
          onLoginFinished={
            (error, result) => {
              if (error) {
                // 登录失败处理
                console.log('登录失败: ', error);
              } else if (result.isCancelled) {
                // 用户取消登录处理
                console.log('用户取消登录');
              } else {
                // 登录成功处理
                console.log('登录成功: ', result);
              }
            }
          }
          onLogoutFinished={() => console.log('登出成功')}
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    // 样式定义
  },
});

这段代码展示了如何在React Native应用中使用react-native-fbsdk库的LoginButton组件来实现Facebook登录功能。它包括了登录和登出的逻辑处理，并在用户登录状态改变时更新组件的状态。同时，它还展示了如何使用AccessToken来获取和删除用户的访问令牌。