转换为Google登录到底部栏导航。
对于ios和Android
我正在遵循教程并创建使用Google登录的React Native应用程序。用户登录后，将显示用户信息，并且有一个注销按钮。还有一个按钮可以将屏幕更改为主屏幕，这是我需要帮助的地方。我想实现一个底部栏导航。底部导航条的代码工作正常，只是不知道如何将成功的Google登录屏幕连接到底部导航条。
我的app.js代码
//This is an example code for Navigator//
import React, { Component } from 'react';
//import react in our code.
//For react-navigation 4.0+
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
import { WebView } from 'react-native-webview';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import SettingsScreen from './pages/SettingsScreen';
import DetailsScreen from './pages/DetailsScreen';
import ProfileScreen from './pages/ProfileScreen';
import LoginPage from './pages/LoginPage';
const App2 = createStackNavigator({
//Constant which holds all the screens like index of any book
LoginPage: { screen: LoginPage},
Home: { screen: HomeScreen },
},
{
initialRouteName: 'LoginPage',
}
);
const HomeStack = createStackNavigator(
{
//Defination of Navigaton from home screen
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
},
{
defaultNavigationOptions: {
//Header customization of the perticular Screen
headerStyle: {
backgroundColor: '#42f44b',
},
headerTintColor: '#FFFFFF',
title: 'Home',
//Header title
},
}
);
const SettingsStack = createStackNavigator(
{
//Defination of Navigaton from setting screen
Settings: { screen: SettingsScreen },
Details: { screen: DetailsScreen },
Profile: { screen: ProfileScreen },
},
{
defaultNavigationOptions: {
//Header customization of the perticular Screen
headerStyle: {
backgroundColor: '#42f44b',
},
headerTintColor: '#FFFFFF',
title: 'Settings',
//Header title
},
}
);
const App = createBottomTabNavigator(
{
Home: { screen: HomeStack },
Settings: { screen: SettingsStack },
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
} else if (routeName === 'Settings') {
iconName = `ios-checkmark-circle${focused ? '' : '-outline'}`;
}
return <IconComponent name={iconName} size={25} color={tintColor} />;
},
}),
tabBarOptions: {
activeTintColor: '#42f44b',
inactiveTintColor: 'gray',
},
}
);
export default (App2)
/*
cd "/Users/carloscraig/rnNoExcusasNew" && npx react-native run-ios
cd "/Users/carloscraig/rnNoExcusasNew" && npx react-native run-android
*/
我的loginpage.js
/*This is th Example of google Sign in*/
import React, { Component } from 'react';
import QRCode from 'react-native-qrcode-svg';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator} from 'react-navigation-stack';
import {
StyleSheet, ImageBackground, ScrollView, Dimensions,
Text,
View, StatusBar,
Alert,
Image,
ActivityIndicator,
TouchableOpacity,
} from 'react-native';
import {
GoogleSignin,
GoogleSigninButton,
statusCodes,
} from 'react-native-google-signin';
const { height } = Dimensions.get('window');
export default class LoginPage extends React.Component {
static navigationOptions = {
title: 'testing title',
//Sets Header text of Status Bar
headerStyle: {
backgroundColor: '#f4511e',
//Sets Header color
},
headerTintColor: '#fff',
//Sets Header text color
headerTitleStyle: {
fontWeight: 'bold',
//Sets Header text style
},
};
constructor(props) {
super(props);
this.state = {
userInfo: null,
gettingLoginStatus: true,
};
};
// For scrollView
state = {
// We don't know the size of the content initially, and the probably won't instantly try to scroll, so set the initial content height to 0
screenHeight: 0,
};
onContentSizeChange = (contentWidth, contentHeight) => {
// Save the content height in state
this.setState({ screenHeight: contentHeight });
};
componentDidMount() {
//initial configuration
GoogleSignin.configure({
//It is mandatory to call this method before attempting to call signIn()
scopes: ['https://www.googleapis.com/auth/drive.readonly'],
// Repleace with your webClientId generated from Firebase console
webClientId: '.com',
});
//Check if user is already signed in
this._isSignedIn();
}
_isSignedIn = async () => {
const isSignedIn = await GoogleSignin.isSignedIn();
//const { navigate } = this.props.navigation;
if (isSignedIn) {
alert('User is already signed in');
//Get the User details as user is already signed in
this._getCurrentUserInfo();
//navigate('Home')
} else {
alert("Please Login");
console.log('Please Login');
}
this.setState({ gettingLoginStatus: false });
};
_getCurrentUserInfo = async () => {
try {
const userInfo = await GoogleSignin.signInSilently();
console.log('User Info --> ', userInfo);
this.setState({ userInfo: userInfo });
} catch (error) {
if (error.code === statusCodes.SIGN_IN_REQUIRED) {
alert('User has not signed in yet');
console.log('User has not signed in yet');
} else {
alert("Something went wrong. Unable to get user's info");
console.log("Something went wrong. Unable to get user's info");
}
}
};
_signIn = async () => {
//Prompts a modal to let the user sign in into your application.
try {
await GoogleSignin.hasPlayServices({
//Check if device has Google Play Services installed.
//Always resolves to true on iOS.
showPlayServicesUpdateDialog: true,
});
const userInfo = await GoogleSignin.signIn();
console.log('User Info --> ', userInfo);
this.setState({ userInfo: userInfo });
} catch (error) {
console.log('Message', error.message);
if (error.code === statusCodes.SIGN_IN_CANCELLED) {
console.log('User Cancelled the Login Flow');
} else if (error.code === statusCodes.IN_PROGRESS) {
console.log('Signing In');
} else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
console.log('Play Services Not Available or Outdated');
} else {
console.log('Some Other Error Happened');
}
}
};
_signOut = async () => {
//Remove user session from the device.
try {
await GoogleSignin.revokeAccess();
await GoogleSignin.signOut();
this.setState({ userInfo: null }); // Remove the user from your app's state as well
} catch (error) {
console.error(error);
}
};
render() {
const scrollEnabled = this.state.screenHeight > height;
//returning Loader untill we check for the already signed in user
if (this.state.gettingLoginStatus) {
return (
<View style={styles.container}>
<ActivityIndicator size="large" color="#0000ff" />
</View>
);
} else {
if (this.state.userInfo != null) {
//Showing the User detail
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<StatusBar barStyle="light-content"></StatusBar>
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={styles.scrollview}
scrollEnabled={scrollEnabled}
onContentSizeChange={this.onContentSizeChange}
>
<ImageBackground source={require("/Users/carloscraig/rnNoExcusasNew/pages/assets/grassbcg2.png")}
style={{ width: '100%', height: '100%' }}>
<Image source={require("/Users/carloscraig/rnNoExcusasNew/pages/assets/noexlogo.png")}
style={styles.logo}>
</Image>
<Image
source={{ uri: this.state.userInfo.user.photo }}
style={styles.imageStyle}
/>
<Text style={styles.text}>
Name: {this.state.userInfo.user.name}{' '}
</Text>
<Text style={styles.text}>
Email: {this.state.userInfo.user.email}
</Text>
<View style={styles.qr}>
<QRCode
value= {this.state.userInfo.user.email}
size={200}
/>
</View>
<TouchableOpacity style={styles.button} onPress={this._signOut} >
<Text>Logout</Text>
</TouchableOpacity>
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={() =>navigate('Home')}>
<Text>Next Page</Text>
</TouchableOpacity>
</View>
</ImageBackground>
</ScrollView>
</View>
);
} else {
const scrollEnabled = this.state.screenHeight > height;
//For login showing the Signin button
return (
<View style={styles.container}>
<StatusBar barStyle="light-content"></StatusBar>
<ScrollView
style={{ flex: 1 }}
contentContainerStyle={styles.scrollview}
scrollEnabled={scrollEnabled}
onContentSizeChange={this.onContentSizeChange}
>
<ImageBackground source={require("/Users/carloscraig/rnNoExcusasNew/pages/assets/grassbcg2.png")}
style={{ width: '100%', height: '100%' }}>
<Image source={require("/Users/carloscraig/rnNoExcusasNew/pages/assets/noexlogo.png")}
style={styles.logo}>
</Image>
<GoogleSigninButton
style={{ width: 312, height: 48 }}
size={GoogleSigninButton.Size.Wide}
color={GoogleSigninButton.Color.Light}
onPress={this._signIn}
/>
</ImageBackground>
</ScrollView>
</View>
);
}
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
},
imageStyle: {
width: 200,
height: 300,
resizeMode: 'contain',
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
width: 300,
marginTop: 30,
marginBottom: 20,
},
scrollview: {
flexGrow: 1,
width: null,
height: null,
},
logo: {
width: 200,
height: 200,
marginTop: 40,
alignSelf: "center",
justifyContent: "center",
},
qr: {
marginTop: 20,
alignSelf: "center",
justifyContent: "center",
},
});
最后是homescreen.js
//This is an example code for Bottom Navigation//
import React from 'react';
//import react in our code.
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
//import all the basic component we have used
export default class extends React.Component {
//Home Screen to show in Home Option
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ marginTop: 50, fontSize: 25 }}>Home!</Text>
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Settings')}>
<Text>Go to settng Tab</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.props.navigation.navigate('Details')}>
<Text>Open Details Screen</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
width: 300,
marginTop: 16,
},
});