Реагировать на родную нижнюю панель навигации - PullRequest
Новая
       11

Реагировать на родную нижнюю панель навигации

0 голосов
/ 28 марта 2020

Переход для входа в Google в нижней панели навигации.

Для ios и Android

Я следую учебным пособиям и создаю собственное приложение реагирования, использующее вход в Google. После входа в систему отображается информация о пользователях и есть кнопка выхода. Есть также кнопка, которая меняет экран на домашний экран, и здесь мне нужна помощь. Я хочу реализовать нижнюю панель навигации. Код для нижней панели навигации работает нормально, просто не знаю, как подключить экран от успешного входа в гугл, к разделу нижней панели навигации.

мое приложение. 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

*/

моя страница входа. 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",
  },
});

и, наконец, домашний экран. 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,
  },
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...