React-native FacebookSDK 显示为带有红色边框的空框

Question

我一直在努力让 facebook 登录按钮工作一段时间。我试图四处搜索并尝试了其他人的几种解决方案，但仍然无法解决。

问题是 Facebook 登录按钮显示为空的红色边框框。

我遵循了 facebook 网站上的所有说明以及 react-native-fbsdk github 文档，但仍然没有成功。

rnpm link 下方的输出

rnpm-link info iOS module apphub is already linked 
rnpm-link info Android module react-native-facebook-login is already linked 
rnpm-link info iOS module react-native-facebook-login is already linked 
rnpm-link info Android module react-native-fbsdk is already linked 
rnpm-link info iOS module react-native-fbsdk is already linked

react-native-fbsdk 已经 linked

来自react-native log-ios

的输出

Apr 15 21:27:16 MacBook-Pro-3 App[28314] <Warning>: Warning: Native component for "RCTFBLikeView" does not exist
Apr 15 21:27:16 MacBook-Pro-3 App[28314] <Warning>: Warning: Native component for "RCTFBLoginButton" does not exist
Apr 15 21:27:16 MacBook-Pro-3 App[28314] <Warning>: Warning: Native component for "RCTFBSendButton" does not exist
Apr 15 21:27:16 MacBook-Pro-3 App[28314] <Warning>: Warning: Native component for "RCTFBShareButton" does not exist

XCode 图书馆

AppDelegate.m

FacebookLoginButton 组件

import React, { PropsType, Component } from 'react';
import {
  View
} from 'react-native';

const FBSDK = require('react-native-fbsdk');

const {
  LoginButton,
  AccessToken
} = FBSDK;

class FacebookLoginButton extends Component {
  render() {
    return (
      <View>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("login has error: " + result.error);
              } else if (result.isCancelled) {
                alert("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    alert(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => alert("logout.")}/>
      </View>
    );
  }
};

export { FacebookLoginButton };

登录组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, TextInput, KeyboardAvoidingView } from 'react-native';
import firebase from 'firebase';
import { emailChanged, passwordChanged, loginUser } from '../../actions';
import { Button, CardSection, Input, Spinner, FacebookLoginButton } from '../common';

class Login extends Component {

  onEmailChange(text) {
    this.props.emailChanged(text);
  }

  onPasswordChange(text) {
    this.props.passwordChanged(text);
  }


  onLoginButtonPress() {
    const { email, password } = this.props;
    console.log('logging in');

    this.props.loginUser({ email, password });
  }

  onFacebookLoginButtonPress() {
    console.log('logging in with facebook');
    var provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('user_birthday');
    firebase.auth().signInWithPopup(provider).then(function(result) {
      // This gives you a Facebook Access Token.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
    });
  }

  renderButton() {
    console.log(this.props);
    switch (this.props.loading) {
      case true:
        return (<Spinner size="large" />)
        break;
      default:
        return (
          <View>
            <Button
              onPress={this.onLoginButtonPress.bind(this)}
              buttonStyleOverride={[styles.buttonStyle]}
              textStyleOverride={[styles.loginButtonText]}
            >เข้าสู่ระบบ</Button>
            <Button
              onPress={this.onFacebookLoginButtonPress.bind(this)}
              buttonStyleOverride={[styles.buttonStyle, styles.facebookButton]}
              textStyleOverride={[styles.facebookButtonText]}
            >Login with Facebook</Button>
            <FacebookLoginButton />
          </View>
        );
    }
  }

  render() {

    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
        <View style={styles.formContainer}>
          <TextInput
            placeholder="Email Address"
            autoCorrect={false}
            style={styles.inputStyle}
            onChangeText={this.onEmailChange.bind(this)}
            value={this.props.email}
          />
          <TextInput
            placeholder="Password"
            autoCorrect={false}
            style={styles.inputStyle}
            onChangeText={this.onPasswordChange.bind(this)}
            value={this.props.password}
          />
        </View>
        <View style={styles.buttonContainer}>
          {this.renderButton()}
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const mapStateToProps = ({ auth }) => {
  const { email, password, error, loading } = auth;

  return { email, password, error, loading };
};

const styles = {
  container: {
    marginTop: -65,
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#f8f8f8'
  },
  formContainer: {
    flexDirection: 'column',
    justifyContent: 'flex-end',
    alignItems: 'center',
    flex: 2,
    paddingLeft: 60,
    paddingRight: 60,
    paddingBottom: 60,
  },
  inputStyle: {
    color: '#646464',
    paddingRight: 15,
    paddingLeft: 15,
    fontSize: 16,
    lineHeight: 23,
    backgroundColor: '#fff',
    height: 50,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    marginBottom: 15,
  },
  buttonContainer: {
    justifyContent: 'flex-start',
    flexDirection: 'column',
    borderColor: '#ddd',
    position: 'relative',
    marginBottom: 10,
    paddingLeft: 60,
    paddingRight: 60,
    flex: 1,
  },
  buttonStyle: {
    position: 'relative',
    borderRadius: 999,
    marginBottom: 15,
    borderColor: '#F4B9BF',
    backgroundColor: '#F4B9BF',
    flex: 0,
  },
  loginButtonText: {
    fontFamily: 'Prompt',
    fontWeight: '400',
    color: '#FFF',
    lineHeight: 24,
  },
  facebookButton: {
    backgroundColor: '#007aff'
  },
  facebookButtonText: {
    color: '#fff',
    lineHeight: 24,
  }
};

export default connect(mapStateToProps, {
  emailChanged,
  passwordChanged,
  loginUser
})(Login);

Answer 1

我找到问题了，问题是我如何实现AppDelegate.m

中的代码

应该是这样的

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

// Facebook SDK Installation
#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"fongdue"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];

  return YES;
}

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {

  BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
                                                                openURL:url
                                                      sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
                                                             annotation:options[UIApplicationOpenURLOptionsAnnotationKey]
                  ];
  // Add any custom logic here.
  return handled;
}

@end

现在按钮按预期显示和工作

React-native FacebookSDK 显示为带有红色边框的空框

React-native FacebookSDK show as empty box with red borders

facebook

facebook-javascript-sdk

react-native

react-native-fbsdk

react-native-ios