Как перейти на другую страницу после входа / регистрации - PullRequest
Новая
       53

Как перейти на другую страницу после входа / регистрации

0 голосов
/ 01 января 2019

Я строю навигацию с response-navigation v3 и аутентификацию с помощью firebase.Нет проблем с этим.Навигационный поток работает, и я могу зарегистрироваться.Проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю кнопку «Зарегистрироваться», она не переходит на экран регистрации.

Итак, структура, которую создает: в App.js я выполняю навигационную часть.Первая отправка экрана приветствия, который включает в себя логин.

Это экран приветствия: 

import React, { Component } from 'react'
import {StyleSheet, View } from "react-native";
import {Container, Text, Form, Content, Header, Button, Input, Label, Item} from 'native-base';
import SignUp from '../screens/register/SignUp'
import * as firebase from 'firebase';

const firebaseConfig = {
    apiKey: "example example",
    authDomain: "example example",
    databaseURL: "example example",
    projectId: "example example",
    storageBucket: "example example",
};
firebase.initializeApp(firebaseConfig);


export default class WelcomeScreen extends Component {
    constructor(props){
        super(props)

        this.state = ({
            email: '',
            password: ''
        })
    }

    loginUser = (email, password, navigate) => {
        try {
            firebase.auth().signInWithEmailAndPassword(email,password).then(function(user){
                console.log(user);
                navigate('Learn')
            })
        }
        catch (error) {
            console.log(error.toString())
        }
    };

    render() {
        return (
            <Container style={styles.container}>
                <Form>
                    <Item floatingLabel>
                        <Label>E-mail</Label>
                        <Input
                            autocorrect={false}
                            autoCapitalize={'none'}
                            onChangeText={(email) => this.setState({email})}
                        />
                    </Item>
                    <Item floatingLabel>
                        <Label>Password</Label>
                        <Input
                            secureTextEntry={true}
                            autocorrect={false}
                            autoCapitalize={'none'}
                            onChangeText={(password)=>this.setState({password})}
                        />
                    </Item>
                </Form>
                <Button style={{backgroundColor:'#6c5ce7', marginTop: 10}}
                    onPress={()=>this.loginUser(this.state.email,this.state.password)}
                    rounded
                    success
                >
                    <Text>Kelimeda'ya Uç</Text>
                </Button>
                <Button style={{backgroundColor:'#6c5ce7', marginTop: 10}}
                    onPress={()=>this.props.navigation.navigate('SignUp')}
                    rounded
                    primary
                >
                    <Text>Beni Kaydet!</Text>
                </Button>
            </Container>
        );
    }
}

Экран регистрации: 

import React, { Component } from 'react'
import {StyleSheet, View } from "react-native";
import {Container, Text, Form, Content, Header, Button, Input, Label, Item} from 'native-base';
import * as firebase from 'firebase';



export default class WelcomeScreen extends Component {
    constructor(props){
        super(props)

        this.state = ({
            email: '',
            password: ''
        })
    }

    signUpUser = (email, password) => {
        try {
            if(this.state.password.length < 6){
                alert('Lutfen 6 dan daha uzun bir karakter giriniz.')
                return
            }
            firebase.auth().createUserWithEmailAndPassword(email,password)
        }
        catch (error) {
            console.log(error.toString())
        }
    };

    render() {
        return (
            <Container style={styles.container}>
                <Form>
                    <Item floatingLabel>
                        <Label>E-mail</Label>
                        <Input
                            autocorrect={false}
                            autoCapitalize={'none'}
                            onChangeText={(email) => this.setState({email})}
                        />
                    </Item>
                    <Item floatingLabel>
                        <Label>Password</Label>
                        <Input
                            secureTextEntry={true}
                            autocorrect={false}
                            autoCapitalize={'none'}
                            onChangeText={(password)=>this.setState({password})}
                        />
                    </Item>
                </Form>
                <Button style={{backgroundColor:'#6c5ce7', marginTop: 10}}
                        onPress={()=>this.signUpUser(this.state.email,this.state.password)}
                        rounded
                        primary
                >
                    <Text>Beni Kaydet!</Text>
                </Button>
            </Container>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 5,
        justifyContent: 'center',
        backgroundColor: '#fff',
    },
});

, и это экран приложения.Нужно ли здесь проверять пользователя, залогинился или нет?или экран приветствия?

//imports...

import React, { Component } from 'react';
import {View, StatusBar} from 'react-native';
import {
  createSwitchNavigator,
  createAppContainer,
  createDrawerNavigator,
  createBottomTabNavigator,
  createStackNavigator,} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import WelcomeScreen from './src/screens/Welcome';
import Learn from './src/screens/Tab/Learn';
import Settings from './src/screens/Tab/Settings';
import Play from './src/screens/Tab/Play';


//content: const & functions and styles...

const DashboardTabNavigator = createBottomTabNavigator({
  Play,
  Learn,
  Settings
},
{
  navigationOptions: ({navigation}) => {
    const {routeName} = navigation.state.routes
        [navigation.state.index];
    return {
      headerTitle: routeName,
      headerTintColor:'#fff',
      headerStyle:{
        backgroundColor: '#2c3e50',
      }
    };
  }
});

const DashStack = createStackNavigator({
  DashboardTabNavigator: DashboardTabNavigator
}, {
  defaultNavigationOptions:({navigation}) =>{
    return {
      headerLeft: <Icon
          style={{paddingLeft: 15, color:'#fff'}}
          onPress={()=>navigation.openDrawer()}
          name={'md-menu'}
          size={30}
          />
    }
  },
});

const appDrawNavigator = createDrawerNavigator({
  Dashboard:{ screen: DashStack }
});

const appSwitchNavigation = createSwitchNavigator({
  Welcome:{ screen: WelcomeScreen },
  Dashboard:{ screen: appDrawNavigator }
});

const AppContainer = createAppContainer(appSwitchNavigation);


class App extends Component {
  render() {
    return(
        <View style={{flex: 1}}>
          <StatusBar
            backgroundColor="blue"
            barStyle="light-content"
         />
          <AppContainer/>
          </View>

    ) ;
  }
}
export default App;

Ответы [ 2 ]

0 голосов
/ 01 января 2019

Ваша функция входа выглядит так, 

 loginUser = (email, password, navigate) => {
        try {
                firebase.auth().signInWithEmailAndPassword(email,password).then(function(user){
                console.log(user);
                navigate('Learn')
            })
        }
        catch (error) {
            console.log(error.toString())
        }
    };

эта функция ожидает три параметра.Вы должны передать «this.props.navigation.navigate» в функцию входа в систему, чтобы использовать навигацию («Learn») 

<Button 
  style={{backgroundColor:'#6c5ce7', marginTop: 10}}
  onPress={()=>this.loginUser(this.state.email,this.state.password,this.props.navigation.navigate)}
  rounded
  success
 >
0 голосов
/ 01 января 2019

Решение проблемы 1: Вы не прошли навигацию к функции loginUser, поэтому она не работает.Пожалуйста, отправьте параметр навигации на loginUser, как это.

<Button
   style={{backgroundColor:'#6c5ce7', marginTop: 10}}
   onPress={()=>this.loginUser(this.state.email,this.state.password, this.props.navigation.navigate)}
   rounded
   success>

Решение проблемы 2: Проблема дублирования firebase связана с тем, что вы дважды инициализируете экземпляр firebase в приложении.Вместо этого вам следует просто инициализировать базу данных firebase в корневом компоненте приложения, например App.js или на экране-заставке, чтобы он был доступен на протяжении всего жизненного цикла приложения, а когда вам нужно его использовать, просто импортируйте его и используйте.

Решение проблемы 3: Это общий вариант использования для того, чтобы узнать статус пользователя, вошедшего в систему, для предварительной навигации пользователя в приложении.Для этого вы можете просто сохранить флаг в AsyncStorage, например.isLoggedIn как YES при успешном входе в систему и публиковать это всякий раз, когда приложение открывается, просто анализируйте наличие / значение флага, когда пользователь вошел в систему или нет.Хорошее место для этого - либо компонент Splashscreen вашего приложения, либо корневой компонент приложения.

Отредактированный ответ (дополнительный): (для задачи 1)

Ваши навигационные маршруты неправильно вложены, чтобы напрямую перейти к экрану обучения с экрана приветствия, чтобы перейти с одного экранас другой стороны, два экрана должны находиться в одной области навигации (если навигатор задан как маршрут в другом навигаторе, навигатор маршрута рассматривается как экран, и пользователь будет перемещаться к его начальному маршруту при переходе к нему)

Ваш код должен быть нацелен на переход к маршруту Dashboard, который будет внутренне отображать вложенные навигаторы, то есть первый / начальный маршрут, но с текущей вложенностью это приведет вас к Play, поэтому, что можно сделать, сделать Learn as first/initial routeнавигатора ваших вкладок.

Код в loginUser должен быть navigate('Dashboard'), а навигатор ваших вкладок должен иметь Learn в качестве исходного маршрута.

Надеюсь, это поможет.Удачного кодирования!

...