Не удалось перейти на другой экран при использовании токена в React Native

Question

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

Это App.js ( EDITED )

import React from 'react';
import { Loading } from './components/common/';
import TabNavigator from './screens/TabNavigator';
import AuthNavigator from './screens/AuthNavigator';
import MainNavigator from './screens/MainNavigator';
import deviceStorage from './services/deviceStorage.js';
import { View, StyleSheet } from 'react-native';

export default class App extends React.Component {
constructor() {
super();
this.state = {
  token: '',
  loading: true
}

this.newJWT = this.newJWT.bind(this);
this.deleteJWT = deviceStorage.deleteJWT.bind(this);
this.loadJWT = deviceStorage.loadJWT.bind(this);
this.loadJWT();

}

state = {
isLoadingComplete: false,
};

newJWT(token){
this.setState({
    token: token
});
}

render() {
if (this.state.loading) {
  return (
    <Loading size={'large'} />
   );
} else if (!this.state.token) {
  return (
        <View style={styles.container}>
            <AuthNavigator screenProps = {{setToken:this.newJWT}} />
        </View>
  );
} else if (this.state.token) {
  return (
        <View style={styles.container}>
            <MainNavigator screenProps = {{token: this.state.token, 
deleteJWT:this.deleteJWT,}} />
        </View>
  );
}
}
}    

Это Login.js ( EDITED-v2 )

import React, { Component, Fragment } from 'react';
import { Text, View, StyleSheet, ImageBackground, KeyboardAvoidingView, 
TouchableOpacity, TextInput, Alert } from 'react-native';
import axios from 'axios';
import deviceStorage from '../services/deviceStorage';

class Login extends Component {

constructor(props) {

    super(props)

    this.state = {
        username: '',
        password: '',
        error: '',
        loading: false
    };

    this.loginUser = this.loginUser.bind(this);
    this.onLoginFail = this.onLoginFail.bind(this);

}

loginUser() {
    const { username, password, password_confirmation } = this.state;

    this.setState({ error: '', loading: true });

    // NOTE Post to HTTPS only in production
    axios.post("http://192.168.1.201:8000/api/login",{
        username: username,
        password: password
    })
    .then((response) => {
        console.log('response',response)
    deviceStorage.saveKey("token", response.data.token);
    console.log(response.data.token);
    this.props.newJWT(response.data.token);
    })
    .catch((error) => {
    const status = error.response.status
    if (status === 401) {
        this.setState({ error: 'username or password not recognised.' });
    }
    this.onLoginFail();
    //console.log(error);
    //this.onLoginFail();
    });
}

onLoginFail() {
    this.setState({
        error: 'Login Failed',
        loading: false
    });
}

render() {
// other codes here
}

const styles = StyleSheet.create({
// other codes here
});
export { Login };

Это TabNavigator.js ( Добавлено )

import React from 'react';
import { Text } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Profile from '../screens/Profile';

const TabNavigator = createMaterialTopTabNavigator(
{
Profile: {
screen: props => <Profile {...props.screenProps} />,
navigationOptions: {
    tabBarIcon: ({ tintColor, focused }) => (
  <Ionicons
    name={focused ? 'ios-person' : 'ios-person'} //TODO change to focused 
icon
    size={30}
    style={{ color: tintColor }}
  />
),
}
},

},
{ initialRouteName: 'Profile',
 tabBarPosition: 'top',
 swipeEnabled: false,
 animationEnabled: true,
 lazy: true,
 tabBarOptions: {
  showLabel: false,
  showIcon: true,
  activeTintColor: 'orange',
  inactiveTintColor: 'orange',
  style: {
    backgroundColor: '#555',
  },
  indicatorStyle: {
    color: '#orange'
  }
}
}
);

const screenTitles = {
Profile: { title: 'Profiler' },
Home: { title: 'Home' },
};

TabNavigator.navigationOptions = ({ navigation }) => {
const { routeName } = navigation.state.routes[navigation.state.index];
const headerTitle = screenTitles[routeName].title;
const tabBarVisible = false;
return {
headerTitle,
tabBarVisible
};
};

export default TabNavigator;

Это мой AuthLoadingScreen.js

import React from 'react';
import { View } from 'react-native';
import { Login } from '../screens/Login';

class AuthLoadingScreen extends React.Component {
constructor(props){
super(props);
this.state = {
  showLogin: true
};
this.whichForm = this.whichForm.bind(this);
this.authSwitch = this.authSwitch.bind(this);
}

authSwitch() {
this.setState({
  showLogin: !this.state.showLogin
});
}

whichForm() {
if(this.state.showLogin){
  return(
    <Login newJWT={this.props.newJWT} authSwitch={this.authSwitch} />

  );
} else {

}
}

render() {
return(
  <View style={styles.container}>
    {this.whichForm()}
  </View>
);
}
}

export default AuthLoadingScreen;

const styles = {
// style codes here
};

Наконец, этоэто мой Profile.js

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Alert, Platform } from 
'react-native';
import { Button, Loading } from '../components/common/';
import axios from 'axios';

export default class Profile extends Component {
constructor(props){
super(props);
this.state = {
  loading: true,
  email: '',
  name: '',
  error: ''
}
}

componentDidMount(){
this.onLocationPressed();
const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer ' + this.props.token
};
axios({
  method: 'GET',
  url: 'http://192.168.1.201:8000/api/user',
  headers: headers,
}).then((response) => {
  console.log('response',response)
  console.log('response2',this.props.token)
  this.setState({
    email: response.data.user.email,
    name: response.data.user.name,
    loading: false
  });
}).catch((error) => {
  console.log(error);
  this.setState({
    error: 'Error retrieving data',
    loading: false
  });
});
}

render() {
const { container, emailText, errorText } = styles;
const { loading, email, name, error } = this.state;

if (loading){
  return(
    <View style={container}>
      <Loading size={'large'} />
    </View>
  )
} else {
    return(
      <View style={container}>
        <View>

            <Text style={emailText}>Your email: {email}</Text>
            <Text style={emailText}>Your name: {name}</Text>
        </View>

        <Button onPress={this.props.deleteJWT}>
          Log Out
        </Button>
      </View>
  );
}
}
}

const styles = {
// style codes here
};

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

Наконец я добавил deviceStorage.js

deviceStorage.js

import { AsyncStorage } from 'react-native';

const deviceStorage = {
async saveKey(key, valueToSave) {
try {
  await AsyncStorage.setItem(key, valueToSave);
} catch (error) {
  console.log('AsyncStorage Error: ' + error.message);
}
},

async loadJWT() {
try {
  const value = await AsyncStorage.getItem('token');
  if (value !== null) {
    this.setState({
      token: value,
      loading: false
    });
  } else {
    this.setState({
      loading: false
    });
  }

} catch (error) {
  console.log('AsyncStorage Error: ' + error.message);
}
},

async deleteJWT() {
try{
  await AsyncStorage.removeItem('token')
  .then(
    () => {
      this.setState({
        token: ''
      })
    }
  );
} catch (error) {
  console.log('AsyncStorage Error: ' + error.message);
}
}
};

export default deviceStorage;

До навигации

После навигации

Answer 1

Внутри App.js вы никогда не измените loading на false, поэтому метод рендеринга никогда не попадет ни в одно из других условий.После получения токена вам необходимо обновить состояние и изменить loading.

Answer 2

Это мои настройки.Отлично работает.Извините, если это немного грязно.Я удалил некоторые вещи для ясности, и я, возможно, что-то упустил:

App.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { Asset, Font, Icon } from 'expo';
import { ENDPOINT, USER_TYPE } from './src/config'
import { Loading } from './src/components/common/';
import deviceStorage from './src/services/deviceStorage.js';
import TabNavigator from './src/TabNavigator';
import AuthNavigator from './src/AuthNavigator';
import MainNavigator from './src/MainNavigator';
import globalStyles from './src/globalStyles';
import './ReactotronConfig';

export default class App extends React.Component {

  constructor() {
    super();
    this.state = {
      jwt: '',
      loading: true,
    };
    this.newJWT = this.newJWT.bind(this);
    this.deleteJWT = deviceStorage.deleteJWT.bind(this);
    this.loadJWT = deviceStorage.loadJWT.bind(this);
    this.loadJWT();
  }

  state = {
    isLoadingComplete: false,
  };

  newJWT(jwt) {
    this.setState({
      jwt: jwt
    });
  }

  render() {
    if (this.state.loading) {
      return (
        <Loading size={'large'} />
       );
    } else if (!this.state.jwt) {
      //console.log(this.props, '<=== app.js');
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AuthNavigator screenProps={{setToken: this.newJWT }} />
        </View>
      );
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <MainNavigator
          screenProps={{ jwt: this.state.jwt,
                         deleteToken: this.deleteJWT,
                      }}
          />
        </View>
      );
    }
  }
}

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

AuthNavigator.js

import React from 'react';
import { createAppContainer, createBottomTabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import AuthScreen from './screens/AuthScreen';

const AuthNavigator = createBottomTabNavigator(
  {
  Auth: (props) => {
    return <AuthScreen {...props.screenProps} />;
  }
  },
  { initialRouteName: 'Auth',
    tabBarOptions: {
      showLabel: false,
      activeBackgroundColor: '#eee',
    }
  }
);

export default createAppContainer(AuthNavigator);

MainNavigator.js

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import TabNavigator from './TabNavigator';

  const MainNavigator = createStackNavigator({
    Main: TabNavigator },
    {
      initialRouteName: 'Main',
      defaultNavigationOptions: {
        headerTitleStyle: {
          fontSize: 20,
          textTransform: 'uppercase'
        }
      }
  });

export default createAppContainer(MainNavigator);

TabNavigator.js

import React from 'react';
import { Text } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import IconBadge from 'react-native-icon-badge';
import ProfileScreen from './screens/ProfileScreen';
import NotificationsScreen from './screens/NotificationsScreen';
import HomeStackNavigator from './HomeStackNavigator';
import CartStackNavigator from './CartStackNavigator';
import QuotesStackNavigator from './QuotesStackNavigator';
import InitialRoute from './InitialRoute';

const TabNavigator = createMaterialTopTabNavigator(
  {
  Profile: {
    screen: props => <ProfileScreen {...props.screenProps} />,
    navigationOptions: {
        tabBarIcon: ({ tintColor, focused }) => (
      <Ionicons
        name={focused ? 'ios-person' : 'ios-person'} //TODO change to focused icon
        size={30}
        style={{ color: tintColor }}
      />
    ),
  }
  },
  Home: HomeStackNavigator,
  Quotes: QuotesStackNavigator,
  Notifications: { screen: props => <NotificationsScreen {...props.screenProps} />,
              navigationOptions: ({ screenProps }) => ({
                tabBarIcon: ({ tintColor, focused }) => (
                  <IconBadge
                    MainElement={
                      <Ionicons
                        name={focused ? 'ios-notifications' : 'ios-notifications'}
                        size={30}
                        style={{ color: tintColor }}
                      />
                    }
                    BadgeElement={
                      <Text style={{ color: '#FFFFFF' }}>{screenProps.unreadMessagesCount}</Text>
                    }
                    IconBadgeStyle={{ width: 15,
                      height: 15,
                      position: 'absolute',
                      top: 1,
                      left: -6,
                      marginLeft: 15,
                      backgroundColor: 'red' }}
                    Hidden={screenProps.unreadMessagesCount === 0}
                  />

            )
          })

  },
  Cart: CartStackNavigator,
},
  { initialRouteName: 'Profile',
    tabBarPosition: 'top',
    swipeEnabled: false,
    animationEnabled: true,
    lazy: true,
    tabBarOptions: {
      showLabel: false,
      showIcon: true,
      activeTintColor: 'orange',
      inactiveTintColor: 'orange',
      style: {
        backgroundColor: '#555',
      },
      indicatorStyle: {
        color: '#orange'
      }
    }
  }
);

const screenTitles = {
   Profile: { title: 'Hola Maestro' },
   Home: { title: 'Selecciona la Categoría' },
   Quotes: { title: 'Mi Historial de Cotizaciones' },
   Notifications: { title: 'Notificaciones' },
   Cart: { title: 'Mi Pedido' },
};

TabNavigator.navigationOptions = ({ navigation }) => {
  const { routeName } = navigation.state.routes[navigation.state.index];
  const headerTitle = screenTitles[routeName].title;
  const tabBarVisible = false;
  return {
    headerTitle,
    tabBarVisible
  };
};

export default TabNavigator;

Login.js

import React, { Component, Fragment } from 'react';
import { Text, View, StyleSheet, ImageBackground, KeyboardAvoidingView } from 'react-native';
import axios from 'axios';
import Ionicons from 'react-native-vector-icons/Ionicons';
//import Pusher from 'pusher-js/react-native';
import { ENDPOINT, USER_TYPE } from '../config'
import deviceStorage from '../services/deviceStorage';
import { Input, TextLink, Loading, Button } from './common';
import Header from '../components/Header';

class Login extends Component {
  constructor(props){
    super(props);
    this.state = {
      username: '',
      password: '',
      error: '',
      loading: false
    };
    this.pusher = null; // variable for storing the Pusher reference
    this.my_channel = null; // variable for storing the channel assigned to this user
    this.loginUser = this.loginUser.bind(this);
  }

  loginUser() {
    const { username, password, password_confirmation } = this.state;

    axios.post(`${ENDPOINT}/login`, {
      user: {
        login: username,
        password: password
      }
    })
    .then((response) => {
      deviceStorage.saveKey("id_token", response.headers.authorization);
      this.props.newJWT(response.headers.authorization);
      //this.setPusherData();
    })
    .catch((error) => {
      this.onLoginFail();
    });
  }

  onLoginFail() {
    this.setState({
      error: 'Usuario o contraseña incorrecta',
      loading: false
    });
  }
  }

  render() {
    const { username, password, error, loading } = this.state;
    const { container, form, section, errorTextStyle, iconContainer, inputContainer, titleText } = styles;

    return (
      <View style={container}>
        <Header title="¡Bienvenido Amigo Maestro!" />
        <View style={form}>
          <ImageBackground source={require('./cemento-login.jpg')} style={{ flex: 1, marginBottom: 30 }}>
          <View style={{marginTop: 120}}>
            <Text style={titleText}>INICIAR SESIÓN</Text>
            <View style={section}>
              <View style={iconContainer}>
                <Ionicons
                  name={'ios-person'}
                  size={26}
                  style={{ color: '#fff', alignSelf: 'center' }}
                />
              </View>
              <View style={inputContainer}>
                <Input
                  placeholder="Usuario"
                  value={username}
                  onChangeText={username => this.setState({ username })}
                />
              </View>
            </View>

          <View style={section}>
            <View style={iconContainer}>
              <Ionicons
                name={'ios-lock'}
                size={26}
                style={{ color: '#fff', alignSelf: 'center' }}
              />
            </View>
            <View style={inputContainer}>
              <Input
                secureTextEntry
                placeholder="Contraseña"
                value={password}
                onChangeText={password => this.setState({ password })}
              />
            </View>
          </View>
          </View>
          </ImageBackground>

        </View>
        <KeyboardAvoidingView
          behavior="padding"
          keyboardVerticalOffset={30}
        >
          <TextLink style={{ }} onPress={this.props.formSwitch}>
            Aún no estas registrado? Regístrate
          </TextLink>
          <TextLink style={{ }} onPress={this.props.forgotPassword}>
            Olvidaste tu contraseña?
          </TextLink>
          <Text style={errorTextStyle}>
            {error}
          </Text>

          {!loading ?
            <Button onPress={this.loginUser}>
              Ingresar
            </Button>
            :
            <Loading size={'large'} />}
        </KeyboardAvoidingView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  form: {
    flex: 0.8
  },
  section: {
    flexDirection: 'row',
    backgroundColor: '#eee',
    borderRadius: 3,
    marginTop: 10,
    height: 40,
    marginLeft: '10%',
    marginRight: '10%',
  },
  titleText: {
    color: '#fff',
    alignSelf: 'center',
    fontSize: 20,
    marginBottom: 10
  },
  errorTextStyle: {
    alignSelf: 'center',
    fontSize: 18,
    color: 'red'
  },
  iconContainer: {
    flex: 0.1,
    height: 40,
    borderRadius: 3,
    alignSelf: 'center',
    justifyContent: 'center',
    backgroundColor: 'orange',
  },
  inputContainer: {
    flex: 0.8,
    alignSelf: 'flex-start',
    marginLeft: -70,
  }
});

export { Login };