3
我一直在努力使Facebook登錄按鈕在一段時間內工作。我試圖四處搜索並嘗試了其他解決方案，但仍無法將其整理出來。React-native FacebookSDK顯示爲帶有紅色邊框的空框
問題是Facebook登錄按鈕顯示爲空的紅色邊框。
我也跟着在Facebook網站上的所有指令以及反應母語-fbsdk GitHub的文檔，但仍然沒有運氣。
輸出rnpm鏈接下面
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
反應，原生fbsdk已鏈接
從反應本地登錄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);
