我已经使用
react-native-simple-auth进行社交登录。我的代码就像
我的App.js
import React, {Component} from 'react';
import { View, Text, Image, StyleSheet, Button, AppRegistry } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import Register from './js/components/Register';
import Signin from './js/components/Signin';
import Dashboard from './js/components/Dashboard';
import Main from './js/components/Main';
import HomeScreen from './js/components/HomeScreen';
import AddHorse from './js/components/AddHorses';
import Logout from './js/components/Logout';
import ForgotPassword from './js/components/ForgotPassword';
import HorseDetails from './js/components/HorseDetails';
import StartChallenge from './js/components/StartChallenge';
import Challenge from './js/components/Challenge';
import HorseChallenge from './js/components/HorseChallenge';
import addThirtyChallenge from './js/components/addThirtyChallenge';
import viewThirtyDetails from './js/components/viewThirtyDetails';
import addSixtyChallenge from './js/components/addSixtyChallenge';
import viewSixtyDetails from './js/components/viewSixtyDetails';
import addNintyChallenge from './js/components/addNintyChallenge';
import viewNintyDetails from './js/components/viewNintyDetails';
import BarChart from './js/components/BarChart';
import Videos from './js/components/Videos';
import PlayVideo from './js/components/PlayVideo';
import Profile from './js/components/Profile';
import EditProfile from './js/components/EditProfile';
import ShopifyLogin from './js/components/ShopifyLogin';
import DirectLogin from './js/components/DirectLogin';
// import Twitter from './js/components/TwitterButton';
// import RNFBLogin from './js/components/RNFBLogin';
const RootStack = createStackNavigator(
{
Home: {screen:HomeScreen},
Main: {screen:Main},
Login: {screen:Signin},
Signup: {screen:Register},
AddHorse: {screen:AddHorse},
Dashboard: {screen:Dashboard},
ForgotPassword: {screen:ForgotPassword},
Logout: {screen:Logout},
HorseDetails: {screen:HorseDetails},
Challenge: {screen:Challenge},
StartChallenge: {screen:StartChallenge},
HorseChallenge: {screen:HorseChallenge},
addThirtyChallenge: {screen:addThirtyChallenge},
viewThirtyDetails: {screen:viewThirtyDetails},
addSixtyChallenge: {screen:addSixtyChallenge},
viewSixtyDetails: {screen:viewSixtyDetails},
addNintyChallenge: {screen:addNintyChallenge},
viewNintyDetails: {screen:viewNintyDetails},
BarChart: {screen:BarChart},
Videos: {screen:Videos},
PlayVideo: {screen:PlayVideo},
Profile: {screen:Profile},
EditProfile: {screen:EditProfile},
ShopifyLogin: {screen:ShopifyLogin},
DirectLogin: {screen:DirectLogin},
});
export default RootStack;
Homescreen.js
import React from 'react';
import { AsyncStorage } from "react-native";
import firebase from 'firebase';
import {
StyleSheet,
Text,
ScrollView,
Picker,
View,
ActivityIndicator,
TouchableHighlight,
Image,
Dimensions,
Navigator,
StatusBar,
NativeModules,
} from 'react-native';
import {Button} from 'react-native';
import {alert} from "react-native/Libraries/Alert/Alert";
import '../../App.js';
import Main from "./Main";
import NavigationExperimental from 'react-native-deprecated-custom-components';
import * as simpleAuthProviders from 'react-native-simple-auth';
import secrets from './secrets';
const facebookSec = {
appId: '1754426114654739',
callback: 'fb1754426114654739://authorize',
};
const googleSec = {
appId: '483972669775-bk26eoeev85lbgsm25q64gels7stalh4.apps.googleusercontent.com',
callback: 'com.hpnutrition:/oauth2redirect',
};
class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
timePassed:false
};
}
render() {
return (
<View><Text>kjsgbngegjen</Text></View>
);
}
}
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
loading:false,
response:null
};
}
componentDidMount() {
setTimeout( () => {
this.setTimePassed();
},3000);
}
setTimePassed() {
this.setState({timePassed: true});
}
render() {
return (
<View style={styles.containerr}>
<StatusBar
backgroundColor="#485b2d"
/>
<View style={styles.container}>
<View style={styles.logo} >
<Image source={require('./logo.png')}/>
</View>
<Text style={styles.signText} >SIGN IN TO ETSY </Text>
<View style={styles.mainbox}>
<View style={styles.viewStyleOne}>
<TouchableHighlight style={[styles.buttonContainer, styles.signupButton1]} onPress={this.onBtnPressed.bind(this, 'google', googleSec)}>
<Text style={styles.textStyle}> CONTINUE WITH GOOGLE </Text>
</TouchableHighlight>
</View>
<Text style={styles.space} > </Text>
<View style={styles.viewStyleOne}>
<TouchableHighlight style={[styles.buttonContainer, styles.signupButton1]} onPress={this.onBtnPressed.bind(this, 'google', facebookSec)}>
<Text style={styles.textStyle}>CONTINUE WITH FACEBOOK </Text>
</TouchableHighlight>
</View>
<View style={styles.viewStyleOne}>
<TouchableHighlight style={[styles.buttonContainer, styles.signupButton1]} onPress={() => this.props.navigation.navigate('ShopifyLogin')}>
<Text style={styles.textStyle}>CONTINUE WITH SHOPIFY </Text>
</TouchableHighlight>
</View>
<Text style={styles.space} > </Text>
<View style={styles.containermenu}>
<View style={styles.viewStyleOne}>
<TouchableHighlight style={[styles.buttonContainer, styles.signupButton1]} onPress={() => this.props.navigation.navigate('Signup')}>
<Text style={styles.textStyle}> REGISTER </Text>
</TouchableHighlight>
</View>
<View style={[styles.viewStyleTwo]} >
<TouchableHighlight style={[styles.buttonContainer, styles.signupButton1]} onPress={() => this.props.navigation.navigate('Login')}>
<Text style={styles.textStyle}> LOGIN </Text>
</TouchableHighlight>
</View>
</View>
</View>
</View>
</View>
);
}
onBtnPressed(provider, opts) {
const _this = this;
this.setState({
loading: true
});
simpleAuthProviders[provider](opts)
.then((info) => {
_this.setState({
loading: false,
data:info
});
_this.props.navigator.push({
title: provider,
provider,
info,
index: 1
});
})
.catch((error) => {
_this.setState({
loading: false
});
Alert.alert(
'Authorize Error',
error.message
);
});
}
}
export default class HomeScreen extends React.Component {
static navigationOptions = ({navigation}) => {
const {state, navigate} = navigation;
};
constructor(props){
super(props);
this.state = {
loading: false,
data:null
};
}
static navigationOptions = {
header: null
}
componentDidMount() {
AsyncStorage.getItem('userDetails').then((user_data_json) => {
let user_data = JSON.parse(user_data_json);
if(user_data != null){
this.props.navigation.navigate('Dashboard');
}else{
this.props.navigation.navigate('Home');
}
});
}
render() {
if(this.props.info==""){
return (
<View><Text>Login</Text></View>
);
}else{
return (
<View><Text>Profile</Text></View>
);
}
}
}
const styles = StyleSheet.create({
logo:{ justifyContent: 'center', alignItems: 'center', marginBottom:30, marginTop:50,},
mainbox:{flex: 1,marginLeft:10,marginRight:10,},
signText:{fontSize: 22, color:'#2b3915',marginBottom:20, marginLeft:20, fontWeight: 'bold', marginRight:20, marginTop:20, borderBottomColor: '#bbb',
borderBottomWidth: StyleSheet.hairlineWidth,},
space:{ height:20,},
container: {
flex: 1,
backgroundColor: '#ffffff',
marginBottom:20,
marginLeft:20,
marginRight:20,
marginTop:20,
},
containerr: {
flex: 1,
backgroundColor: '#485b2d'
},
backgroundImage: {
flex: 1,
width: null,
height: null,
resizeMode: 'cover'
},
containermenu: { flexDirection: 'row', flex: 1,
justifyContent:'space-between',
},
viewStyleOne: {
alignItems:'center',
backgroundColor:'#2b3b15',
borderColor: '#b6a238',
borderRightWidth: 10,
borderLeftWidth: 10,
paddingLeft:20,
paddingRight:20,
paddingTop:15,
paddingBottom:15,
height: 50,
margin:5
},
viewStyleTwo: {
backgroundColor:'#2b3b15',
borderColor: '#b6a238',
borderRightWidth: 10,
borderLeftWidth: 10,
paddingLeft:40,
paddingRight:40,
paddingTop:15,
paddingBottom:15,
height: 50,
margin:5
},
newClass:{
marginLeft:50,
},
textStyle:{
textAlign:'center',fontSize: 16, color:'#ffffff',fontWeight: 'bold',
},
});
要求：
一切正常，但是我无法读取来自onPress事件的响应。最终，“登录”页面将加载并在此处停止。响应不为空后，我需要移至下一页。