Question

我需要帮助，如何将facebook sdk与本机进行整合。我正在关注此文档以进行集成referrence docs。

版本

反应：16.0.0-beta.5

react-native：0.49.5

react-native-fbsdk：^ 0.6.3

我现在遇到的问题是。

登录按钮在屏幕上实现，点击登录按钮后，Facebook页面会显示现有帐户或创建新帐户选项，使用现有帐户登录时，我遇到此错误

应用程序配置不允许使用URL：应用程序的设置不允许使用一个或多个给定的URL。要使用此URL，您必须在应用程序的设置中添加有效的本机平台

这是我的页面代码

import React, { Component } from 'react';
import { Text , StyleSheet, View, ScrollView, Image, TouchableOpacity } from 'react-native';
import Swiper from 'react-native-swiper';
import iconBgSplash from '../../images/iconBgSplash.png'
import iconEvent from '../../images/iconEventSplash.png'
import { Container, Content, Button } from 'native-base'
import LinearGradient from 'react-native-linear-gradient';
import FBSDK from 'react-native-fbsdk'

const {
  LoginButton,
  AccessToken
} = FBSDK;

console.log("FBSDK",FBSDK)
class WalkThrough extends Component {

    constructor(props){
        super(props);
        this.changeRouteToNewScreen = this.changeRouteToNewScreen.bind(this)
    }

    changeRouteToNewScreen() {
        this.props.navigation.navigate('VerifyMobileNumber')
    }

    render(){
        return(

        <View style={styles.container}>
            <View style={styles.baseContainer}>
                <Swiper activeDotColor={'#FFF'} loop={false}>
                    <View style={{alignItems:'center'}}>
                        <Image source={iconBgSplash} style={{width:100,height:100, marginTop:'10%' }}>
                            <Image source={iconEvent} style={{width:60, height:60,marginTop:23, margin:19 }}/>
                        </Image>
                        <Text style={{fontSize:12, color:'#FFF', width:'80%', marginTop:25, textAlign:'center' }}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</Text>
                        <View style={{alignSelf:'flex-end'}}>
                            <Button onPress={() => this.changeRouteToNewScreen() } style={{width:80,height:40,margin:10, backgroundColor:'#fff'}}>
                                <Text style={{margin:20,fontSize:15, color:'#5269BE'}}>Skip </Text>
                            </Button>
                        </View>
                    </View>
                    <View style={{alignItems:'center'}}>
                        <Image source={iconBgSplash} style={{width:100,height:100, marginTop:'10%' }}>
                            <Image source={iconEvent} style={{width:60, height:60,marginTop:23, margin:19 }}/>
                        </Image>
                        <Text style={{fontSize:12, color:'#FFF', width:'80%', marginTop:25, textAlign:'center' }}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</Text>
                    </View>
                    <View style={{alignItems:'center'}}>
                        <Image source={iconBgSplash} style={{width:100,height:100, marginTop:'10%' }}>
                            <Image source={iconEvent} style={{width:60, height:60,marginTop:23, margin:19 }}/>
                        </Image>
                        <Text style={{fontSize:12, color:'#FFF', width:'80%', marginTop:25, textAlign:'center' }}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</Text>
                    </View>
                    <View style={{alignItems:'center'}}>
                        <Image source={iconBgSplash} style={{width:100,height:100, marginTop:'10%' }}>
                            <Image source={iconEvent} style={{width:60, height:60,marginTop:23, margin:19 }}/>
                        </Image>
                        <Text style={{fontSize:12, color:'#FFF', width:'80%', marginTop:25, textAlign:'center' }}>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</Text>
                        <View style={{alignSelf:'flex-end'}}>
                            <Button onPress={() => this.changeRouteToNewScreen() } style={{width:80,height:40,margin:10, backgroundColor:'#fff'}}>
                                <Text style={{margin:20,fontSize:15, color:'#5269BE'}}>Done </Text>
                            </Button>
                        </View>
                    </View>
                </Swiper>
            </View>
            <View style={styles.bottomContainer}>
                <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.")}/>

                    <TouchableOpacity onPress={() => alert('Login with Facebook')}>
                        <LinearGradient start={{x: 1.0, y:2.0}} end={{x: 0.0, y: 0.5}} locations={[0,0.6]} colors={['#314885', '#5A74BA']} style={styles.linearGradient} >
                          <Text style={styles.buttonText}>
                            Login with Facebook
                          </Text>
                        </LinearGradient>
                    </TouchableOpacity>
                </View>
                <View>
                    <TouchableOpacity onPress={() => alert('Sign in with Phone')}>
                        <LinearGradient start={{x: 1.0, y:2.0}} end={{x: 0.0, y: 0.5}} locations={[0,0.6]} colors={['#5B83FF', '#5BB0FF']} style={styles.linearGradient} >
                          <Text style={styles.buttonText}>
                            Sign in with Phone
                          </Text>
                        </LinearGradient>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
        );
    }
}

var styles = StyleSheet.create({
  container: {
    flex:1,
    flexDirection: 'column',
    backgroundColor: 'white'
  },
  baseContainer: {
    flex:1,
    backgroundColor: '#5269BE'
  },
  bottomContainer: {
    flex:1,
    flexDirection:'column', 
    justifyContent: 'space-around'
  },
  linearGradient: {
    //flex: 1,
    width:'70%', 
    marginLeft:'15%',
    borderRadius:25
    //paddingLeft: 15,
    //paddingRight: 15,
    //borderRadius: 5
  },
  buttonText: {
   // marginLeft:'30%',
    fontSize:17, 
    color:'white',
    margin: 16,
    fontWeight:'bold',
    //fontFamily: 'Gill Sans',
    //fontSize: 18,
    //fontFamily: 'Gill Sans',
    alignSelf: 'center'
    ///margin: 10,
    //color: '#ffffff',
    //backgroundColor: 'transparent',
  },
})

export default WalkThrough

如何使用本机实现facebook？

0 个答案: